Flutter(Widget) - 布局组件
2022-07-12 本文已影响0人
aofeilin
Padding, Row ,Column,Expanded ,flex
Stack align position Card Wrap
截屏2022-07-14 09.54.29.png
1.Padding:内边距
截屏2022-07-08 16.49.01.png
class ZflPaddingWidget extends StatefulWidget {
@override
_ZflState createState() => _ZflState();
}
class _ZflState extends State<ZflPaddingWidget> {
@override
Widget build(BuildContext context) {
return Container(
child: Container(
padding: EdgeInsets.only(right: 10),
child: GridView.count(crossAxisCount: 4,
childAspectRatio: 1.7,
children: [
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
Padding(padding: EdgeInsets.fromLTRB(10, 10, 0, 0),child:
Image.network('https://www.itying.com/images/flutter/1.png',fit: BoxFit.cover)),
],
),
),
);
}
}
2.Row:
截屏2022-07-12 12.23.09.png
import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';
class ZFLRowCellWidget extends StatefulWidget {
@override
_ZFLRowCellWidgetState createState() => _ZFLRowCellWidgetState();
}
class _ZFLRowCellWidgetState extends State<ZFLRowCellWidget> {
@override
Widget build(BuildContext context) {
return Container(
// width: 800,
// height: 400,
alignment: Alignment.center,
// child: SingleChildScrollView(
// scrollDirection: Axis.horizontal,和spaceEvenly冲突
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZFLCellTitleWidget(
color: Colors.red,
height: 100,
),
ZFLCellTitleWidget(color: Colors.yellow, height: 100),
ZFLCellTitleWidget(color: Colors.blue, height: 100),
],
),
// ),
);
}
}
import 'package:flutter/material.dart';
class ZFLCellTitleWidget extends StatefulWidget {
final Color color;
final double height;
const ZFLCellTitleWidget({Key key, this.color, this.height}) : super(key: key);
@override
_ZFLCellTitleWidgetState createState() => _ZFLCellTitleWidgetState();
}
class _ZFLCellTitleWidgetState extends State<ZFLCellTitleWidget> {
@override
Widget build(BuildContext context) {
return Container(
width: this.widget.height,
height: this.widget.height,
color: this.widget.color,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(
Icons.accessibility_outlined,
),
Text('标题')
],
),
);
}
}
3.Column:
截屏2022-07-12 12.35.58.png
import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';
/// @Description TODO
class ZFLColumnCellWidget extends StatefulWidget {
@override
_ZFLColumnCellWidgetState createState() => _ZFLColumnCellWidgetState();
}
class _ZFLColumnCellWidgetState extends State<ZFLColumnCellWidget> {
@override
Widget build(BuildContext context) {
return Container(
alignment: Alignment.topCenter,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ZFLCellTitleWidget(),
ZFLCellTitleWidget(),
ZFLCellTitleWidget(),
ZFLCellTitleWidget(),
ZFLCellTitleWidget(),
],
),
);
}
}
4.Expanded flex
截屏2022-07-12 12.45.59.png
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_app/padding_row_column_expand/zfl_cell.dart';
/// @Description TODO
class ZFLExpandingWidget extends StatefulWidget {
@override
_ZFLExpandingWidgetState createState() => _ZFLExpandingWidgetState();
}
class _ZFLExpandingWidgetState extends State<ZFLExpandingWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
alignment: Alignment.topLeft,
height: 200,
child: Row(
children: [
Expanded(
flex: 2,
child: ZFLCellTitleWidget(
color: Colors.blue,
)),
Expanded(
flex: 1,
child: Column(
children: [
ZFLCellTitleWidget(color: Colors.yellow,height: 100,),
ZFLCellTitleWidget(color: Colors.orange,height: 100,),
],
)
)
],
),
);
}
}
5.Stack alignment Positioned
截屏2022-07-12 13.46.34.png
import 'dart:ui';
import 'package:flutter/material.dart';
class ZFLStackWidget1 extends StatefulWidget {
@override
_ZFLStackWidgetState createState() => _ZFLStackWidgetState();
}
class _ZFLStackWidgetState extends State<ZFLStackWidget1> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
color: Colors.red,
width: MediaQuery.of(context).size.width,
height: 300,
child: Stack(
alignment: Alignment(1,0.3),
children: [
Align(
alignment: Alignment(1, -0.2),
child: Icon(Icons.home,size: 40,),
),
Align(
alignment: Alignment(1, 1),
child: Icon(Icons.home,size: 40,),
),
Align(
alignment: Alignment(0, 0),
child: Icon(Icons.home,size: 40,),
),
],
),
);
}
}
截屏2022-07-12 13.55.21.png
import 'dart:ui';
import 'package:flutter/material.dart';
class StackPositionWidget extends StatefulWidget {
@override
_StackPositionWidgetState createState() => _StackPositionWidgetState();
}
class _StackPositionWidgetState extends State<StackPositionWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin: EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
width: MediaQuery.of(context).size.width,
height: 400,
color: Colors.red,
child: Stack(
children: [
Positioned(
bottom: 0,
left: 10,
child: Icon(
Icons.account_box_outlined,
size: 30,
)),
Positioned(
right: 50,
child: Icon(
Icons.account_box_outlined,
size: 30,
)),
Positioned(
bottom: 0,
left: 100,
child: Icon(
Icons.account_box_outlined,
size: 30,
)),
],
),
);
}
}
6.Card AspectRatio
截屏2022-07-12 17.06.19.png
import 'package:flutter/material.dart';
/// FileName zfl_card_page.dart
///
/// @Author zhangfanglin
/// @Date 7/12/22 4:52 PM
///
/// @Description TODO
///
class ZFLCardPage extends StatefulWidget {
@override
_ZFLCardPageState createState() => _ZFLCardPageState();
}
class _ZFLCardPageState extends State<ZFLCardPage> {
@override
Widget build(BuildContext context) {
return listTitleImageWidget();
}
listTitleWidget() {
return Container(
child: ListView(
children: [
Card(
child: Column(
children: [
ListTile(
title: Text(
'张三',
style: TextStyle(fontSize: 18),
),
subtitle: Text('高级工程机'),
),
],
),
),
Card(
child: Column(
children: [
ListTile(
title: Text(
'张三',
style: TextStyle(fontSize: 18),
),
subtitle: Text('高级工程机'),
),
],
),
)
],
),
);
}
listTitleImageWidget() {
return Container(
child: ListView(
children: [
Card(
child: Column(
children: [
AspectRatio(
aspectRatio: 2 / 1,
child: Image.network(
'https://img0.baidu.com/it/u=1879498024,2089500398&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500',
fit: BoxFit.cover,
),
),
ListTile(
leading: ClipOval(
child: Image.network("https://www.itying.com/images/flutter/2.png",fit: BoxFit.cover,height:60,width: 60),
),
title: Text(
'张三',
style: TextStyle(fontSize: 18),
),
subtitle: Text('高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机',overflow: TextOverflow.ellipsis,),
),
],
),
),
Card(
child: Column(
children: [
ListTile(
title: Text(
'张三',
style: TextStyle(fontSize: 18),
),
subtitle: Text('高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机高级工程机',),
),
],
),
)
],
),
);
}
}
7.Wrap:
截屏2022-07-13 15.00.37.png
import 'dart:ui';
import 'package:flutter/material.dart';
class ZFLWrapWidget extends StatefulWidget {
@override
_ZFLWrapWidgetState createState() => _ZFLWrapWidgetState();
}
class _ZFLWrapWidgetState extends State<ZFLWrapWidget> {
@override
Widget build(BuildContext context) {
return Container(
margin:
EdgeInsets.only(top: MediaQueryData.fromWindow(window).padding.top),
child: Wrap(
spacing: 10,
runSpacing:10,
children: [
MyButton(
title: 'title1title1title1title1',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2',
),
MyButton(
title: 'title2title2title2title2title2',
),
MyButton(
title: 'title2title2title2title2',
),
MyButton(
title: 'title2',
),
],
),
);
}
}
class MyButton extends StatelessWidget {
final String title;
const MyButton({Key key, this.title}) : super(key: key);
@override
Widget build(BuildContext context) {
return Container(
height: 20,
// color: Colors.lightGreenAccent,
child: RaisedButton(
onPressed:(){
},
color: Colors.yellow,//背景颜色
// padding:EdgeInsets.zero,
child: Text(
this.title,
textAlign: TextAlign.left,
style: TextStyle(
color: Colors.red
),
),
),
);
}
}
