Flutter--页面布局
  45VoiS2mj7n5 2023年11月02日 71 0


Padding组件

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Padding(
padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
child: GridView.count(
crossAxisCount: 2,
childAspectRatio: 1.5,
children: <Widget>[
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
Padding(
padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
child: Image.network('https://profile.csdnimg.cn/B/0/A/1_qq_39424143',
fit: BoxFit.cover),
),
],
),
);
}
}

Flutter--页面布局_Image

Row水平布局组件

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 700,
width: 500,
color: Colors.black26,
child: Row(
crossAxisAlignment: CrossAxisAlignment.center, // 垂直方向排列未居中
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 类似于weight, 在这里使水平方向均匀分布
children: <Widget>[
IconContainer(Icons.home, color: Colors.red),
IconContainer(Icons.search, color: Colors.blue),
IconContainer(Icons.send, color: Colors.orange),
],
),
);
}
}

class IconContainer extends StatelessWidget {
double size;
IconData icon;
Color color;


IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
this.size = 32.0;
}


@override
Widget build(BuildContext context) {
return Container(
width: this.size + 60,
height: this.size + 60,
color: this.color,
child: Center(
child: Icon(this.icon, color: Colors.white, size: this.size)));
}
}

Flutter--页面布局_dart_02

Column垂直布局

class HomeContent extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 700,
width: 500,
color: Colors.black26,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center, // 水平方向排列未居中
mainAxisAlignment: MainAxisAlignment.spaceEvenly, // 类似于weight, 在这里使水平方向均匀分布
children: <Widget>[
IconContainer(Icons.home, color: Colors.red),
IconContainer(Icons.search, color: Colors.blue),
IconContainer(Icons.send, color: Colors.orange),
],
),
);
}
}

Flutter--页面布局_ide_03

Expand

属性

释义

flex

元素占父布局的比例,类似于weight

@override
Widget build(BuildContext context) {
return Row(


children: <Widget>[
Expanded(
flex: 1,
child: IconContainer(Icons.search,color: Colors.blue)
),
Expanded(
flex: 2,
child: IconContainer(Icons.home,color: Colors.orange),
),
Expanded(
flex: 1,
child: IconContainer(Icons.select_all,color: Colors.red),
),


],
);
}

Flutter--页面布局_ide_04


【版权声明】本文内容来自摩杜云社区用户原创、第三方投稿、转载,内容版权归原作者所有。本网站的目的在于传递更多信息,不拥有版权,亦不承担相应法律责任。如果您发现本社区中有涉嫌抄袭的内容,欢迎发送邮件进行举报,并提供相关证据,一经查实,本社区将立刻删除涉嫌侵权内容,举报邮箱: cloudbbs@moduyun.com

  1. 分享:
最后一次编辑于 2023年11月08日 0

暂无评论

推荐阅读
  b1UHV4WKBb2S   2023年11月13日   34   0   0 裁剪ideflutter
  b1UHV4WKBb2S   2023年11月13日   27   0   0 flutterDart
  zSWNgACtCQuP   2023年11月13日   32   0   0 ide
45VoiS2mj7n5