Flutter 组件之 Padding、Row、Column、F
2023-10-10 本文已影响0人
Abner_XuanYuan
1、Padding
Padding 组件用来处理容器与子元素之间的间距。
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return GridView.count(
crossAxisSpacing: 10,
mainAxisSpacing: 10,
crossAxisCount: 2,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
'https://www.itying.com/images/flutter/1.png',
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
'https://www.itying.com/images/flutter/2.png',
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.all(10),
child: Image.network(
'https://www.itying.com/images/flutter/3.png',
fit: BoxFit.cover,
),
),
],
);
}
}
2、Row 水平布局组件
Row Row({
Key? key,
//主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
//主轴大小,可以选择min、max;
MainAxisSize mainAxisSize = MainAxisSize.max,
//横轴的对齐方式
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
//文字方向
TextDirection? textDirection,
//垂直方向
VerticalDirection verticalDirection = VerticalDirection.down,
//项目对齐基线
TextBaseline? textBaseline,
List<Widget> children = const <Widget>[],
})
示例
///Row
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Container(
height: double.infinity,
width: double.infinity,
color: Colors.lightBlue,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconContainer(
Icons.home,
size: 100,
),
IconContainer(
Icons.home_filled,
color: Colors.black,
size: 50,
),
IconContainer(
Icons.home_mini,
color: Colors.orange,
),
],
),
);
}
}
// ignore: must_be_immutable
class IconContainer extends StatelessWidget {
Color color;
double size;
IconData icon;
IconContainer(this.icon,
{super.key, this.color = Colors.red, this.size = 32.0});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: color,
child: Center(
child: Icon(
icon,
size: size,
color: Colors.white,
),
),
);
}
}
3、Column 垂直布局组件
Column Column({
Key? key,
//主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
//主轴大小,可以选择min、max;
MainAxisSize mainAxisSize = MainAxisSize.max,
//横轴的对齐方式
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
//文字方向
TextDirection? textDirection,
//垂直方向
VerticalDirection verticalDirection = VerticalDirection.down,
//项目对齐基线
TextBaseline? textBaseline,
List<Widget> children = const <Widget>[],
})
示例
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Container(
width: double.infinity,
height: double.infinity,
color: Colors.lightGreen,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
IconContainer2(Icons.home),
IconContainer2(
Icons.search,
color: Colors.black,
size: 50,
),
IconContainer2(
Icons.send,
color: Colors.green,
),
IconContainer2(
Icons.back_hand,
size: 50,
),
],
),
);
}
}
// ignore: must_be_immutable
class IconContainer2 extends StatelessWidget {
// late IconData iconData;
// late Color color;
// late double size;
IconData iconData;
Color color;
double size;
IconContainer2(this.iconData,
{super.key, this.color = Colors.orange, this.size = 30});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: color,
child: Center(
child: Icon(
iconData,
size: size,
color: Colors.white,
)),
);
}
}
注：
double.infinity & double.maxFinite：可以让当前元素的 width 或者 height 达到父元素的尺寸。
4、Flex
Flex 组件可以沿着水平或垂直方向排列子组件，如果你知道主轴方向，使用 Row 或 Column 会方便一些，因为 Row 和 Column 都继承自 Flex ，参数基本相同，所以能使用 Flex 的地方基本上都可以使用 Row 或 Column 。 Flex 本身功能是很强大的，它也可以和 Expanded 组件配合实现弹性布局 。
Flex Flex({
Key? key,
//子组件在主轴上的布局方向
required Axis direction,
//主轴对齐方式,可以选择start、end、center、spaceBetween、spaceAround、spaceEvenly
MainAxisAlignment mainAxisAlignment = MainAxisAlignment.start,
//主轴大小,可以选择min、max;
MainAxisSize mainAxisSize = MainAxisSize.max,
//横轴的对齐方式
CrossAxisAlignment crossAxisAlignment = CrossAxisAlignment.center,
//文字方向
TextDirection? textDirection,
//垂直方向
VerticalDirection verticalDirection = VerticalDirection.down,
//项目对齐基线
TextBaseline? textBaseline,
/*
当子组件在主轴上的总空间在父 FlexBox 控件内有溢出部分,绘制孩子时的裁剪行为,分别为：
Clip.none -- 不裁剪孩子们在父亲中的溢出部分,溢出部分会在父亲的范围外显示出来。
Clip.hardEdge -- 速度最快,但保真度较低。
Clip.antiAlias -- 坑锯齿裁剪(边缘更加平滑),裁剪后孩子们不会在新的画布上绘制,比 Clip.hardEdge稍慢。
Clip.antiAliasWithSaveLayer - 坑锯齿裁剪(边缘更加平滑),裁剪后孩子们会在新的画布上绘制,速度最慢,很少被用到。
*/
Clip clipBehavior = Clip.none,
List<Widget> children = const <Widget>[],
})
示例
//水平布局
///Flex
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Row( //此处的 Row 可以代替以下两行代码
// return Flex(
// direction: Axis.horizontal,
children: [
Expanded(
flex: 2,
child: IconContainer3(Icons.home),
),
Expanded(flex: 1, child: IconContainer3(Icons.search)),
],
);
}
}
// ignore: must_be_immutable
class IconContainer3 extends StatelessWidget {
Color color;
IconData icon;
double size;
IconContainer3(this.icon,
{super.key, this.color = Colors.red, this.size = 50});
@override
Widget build(BuildContext context) {
return Container(
width: 100,
height: 100,
color: color,
child: Center(
child: Icon(
icon,
size: size,
color: Colors.white,
),
),
);
}
}
//垂直布局
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Column(//此行可以替换一下两行代码
// return Flex(
// direction: Axis.vertical,
children: [
Expanded(
flex: 2,
child: IconContainer4(
Icons.home,
color: Colors.red,
)),
Expanded(
flex: 1,
child: IconContainer4(
Icons.search,
color: Colors.green,
)),
Expanded(
flex: 3,
child: IconContainer4(
Icons.back_hand,
color: Colors.orange,
)),
],
);
}
}
// ignore: must_be_immutable
class IconContainer4 extends StatelessWidget {
IconData icon;
Color color;
double size;
IconContainer4(this.icon,
{super.key, this.color = Colors.red, this.size = 30});
@override
Widget build(BuildContext context) {
return Container(
height: 100,
width: 100,
color: color,
child: Center(
child: Icon(
icon,
size: size,
color: Colors.white,
),
),
);
}
}
///混合布局
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ListView(
padding: const EdgeInsets.all(10),
children: [
Container(
width: double.infinity,
height: 200,
color: Colors.black,
),
const SizedBox(height: 10),
Row(
children: [
Expanded(
flex: 2,
child: SizedBox(
height: 180,
child: Image.network(
"https://www.itying.com/images/flutter/2.png",
fit: BoxFit.cover),
),
),
const SizedBox(width: 10),
Expanded(
flex: 1,
child: SizedBox(
height: 180,
child: Column(
children: [
Expanded(
flex: 1,
child: SizedBox(
width: double.infinity,
child: Image.network(
"https://www.itying.com/images/flutter/3.png",
fit: BoxFit.cover),
),
),
const SizedBox(height: 10),
Expanded(
flex: 2,
child: SizedBox(
width: double.infinity,
child: Image.network(
"https://www.itying.com/images/flutter/4.png",
fit: BoxFit.cover),
),
)
],
),
))
],
)
],
);
}
}
