Padding
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return const Padding(
padding: EdgeInsets.all(50),
child: Text("你好"),
);
}
}
就是给上下左右来点边距,功能单一但是占用内存少
线性布局组件(Column和Row)
class _IconContainerWidget extends StatelessWidget {
const _IconContainerWidget({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 100,
width: 100,
color: Colors.red,
child: const Icon(
Icons.home,
color: Colors.white,
size: 28,
),
);
}
}
自定义组件传参
class _IconContainerWidget extends StatelessWidget {
Color color;
IconData icon;
_IconContainerWidget(this.icon, {Key? key, required this.color})
: super(key: key);
Widget build(BuildContext context) {
return Container(
alignment: Alignment.center,
height: 100,
width: 100,
color: color,
child: Icon(
icon,
color: Colors.white,
size: 28,
),
);
}
}
水平布局组件(Row)
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Row(
children: [
_IconContainerWidget(
Icons.home,
color: Colors.red,
),
_IconContainerWidget(
Icons.settings,
color: Color.fromRGBO(200, 200, 200, 1),
)
],
);
}
}
垂直布局组件(Column)
写法是
_IconContainerWidget(Icons.white,color:Colors.red)
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Column(
children: [
_IconContainerWidget(
Icons.home,
color: Colors.red,
),
_IconContainerWidget(
Icons.settings,
color: Color.fromRGBO(200, 200, 200, 1),
)
],
);
}
}
弹性布局(Flex&Expanded)
Expanded组件
必须放在Row(行)
或Column(列)
又或者Flex
组件中
Expanded
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
flex: 1,
child: _IconContainerWidget(
Icons.home,
color: Colors.red,
),//在这个Expanded组件中设置宽高是没有用的
),
Expanded(
flex: 2,
child: _IconContainerWidget(
Icons.settings,
color: Color.fromRGBO(200, 200, 0, 1),
),
)
],
);
}
}
Flex
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
Widget build(BuildContext context) {
return Flex(
direction: Axis.horizontal, //Axis.horizontal:行;Axis.vertical:列
children: [
Expanded(
flex: 1,
child: _IconContainerWidget(
Icons.home,
color: Colors.red,
), //在这个Expanded组件中设置宽高是没有用的
),
Expanded(
flex: 2,
child: _IconContainerWidget(
Icons.search, //搜索
color: Color.fromRGBO(200, 200, 0, 1),
),
)
],
);
}
}
可以写行(
Axis.horizontal
)或者写列(Axis.vertical
)
达到父元素的尺寸
double.infinity
和double.maxFinite
都能达到父元素的尺寸
Container(
alignment: Alignment.center,
height: double.infinity,
width: double.infinity,
...
);