---

一、线性布局

1.Column

• Column中的主轴方向是垂直方向

• mainAxisAlignment：MainAxisAlignment-主轴对齐方向

• crossAxisAlignment：CrossAxisAlignment-交叉轴对齐方向

• children：内容

2.Row

• Row中的主轴方向是水平方向（其他属性与cross一致）

3.代码

class ColumnRowDemo extends StatelessWidget {const ColumnRowDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(color: Colors.lightGreen,width: double.infinity,child: Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,crossAxisAlignment: CrossAxisAlignment.center,children: [Icon(Icons.access_alarm,size: 50),Icon(Icons.accessible_forward,size: 50),Icon(Icons.settings,size: 50),Icon(Icons.add_a_photo,size: 50),Row(mainAxisAlignment: MainAxisAlignment.spaceBetween,children: [Icon(Icons.access_alarm,size: 50),Icon(Icons.accessible_forward,size: 50),Icon(Icons.settings,size: 50),Icon(Icons.add_a_photo,size: 50),],)],),);}
}

4.效果

二、弹性布局

1.Flex

• direction（声明主轴方向）

• mainAxisAlignment（声明主轴对齐方向）

• textDirection（声明水平方向的排列顺序）

• crossAxisAlignment（声明交叉方向轴对齐方式）

• verticalDirection（声明垂直方向的排列顺序）

• children（声明子组件）

2.Expanded（可伸缩组件）

• flex（声明弹性布局所占比例）
• child（声明子组件）

3.代码

class FlexDemo extends StatelessWidget {const FlexDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Column(children: [Row(children: [Container(color: Colors.lightBlue,height: 50,width: 50,),Expanded(child: Container(color: Colors.lightGreen,height: 50,),)],),Flex(direction: Axis.horizontal,mainAxisAlignment: MainAxisAlignment.spaceAround,textDirection: TextDirection.rtl,children: [Icon(Icons.access_alarm, size: 50),Icon(Icons.accessible_forward, size: 50),Icon(Icons.settings, size: 50),Icon(Icons.add_a_photo, size: 50),],),Flex(direction: Axis.horizontal,children: [Expanded(child: Container(color: Colors.tealAccent,height: 50,width: 50,),flex: 2,),Expanded(child: Container(color: Colors.yellow,height: 50,width: 50,),flex: 1,)],),Container(height: 100,margin: EdgeInsets.all(50),child: Flex(direction: Axis.vertical,verticalDirection: VerticalDirection.up,children: [Expanded(child: Container(color: Colors.tealAccent,height: 50,width: 50,),flex: 2,),Spacer(flex: 1,),Expanded(child: Container(color: Colors.yellow,height: 50,width: 50,),flex: 1,)],),)],);}
}

4.效果

三、流式布局

1.Wrap（解决内容溢出问题）

• spacing （主轴方向子组件的间距）

• runSpacing （纵轴方向子组件的间距）

• alignment （主轴方向子组件的对齐方式）

• runAlignment （纵轴方向子组件的对齐方式）

2.Chip（标签）

3.CircleAvatar（圆形头像）

4.代码

class WrapDemo extends StatelessWidget {List<String> _list=['曹操','司马懿','曹仁','曹洪','张辽','许褚'];List<Widget> _weiGuo(){return _list.map((item) => Chip(avatar: CircleAvatar(backgroundColor: Colors.red,child: Text('魏'),),label: Text(item),)).toList();}@overrideWidget build(BuildContext context) {return Column(mainAxisAlignment: MainAxisAlignment.spaceEvenly,children: [Wrap(children: _weiGuo(),spacing: 18.0,runSpacing: 100,alignment: WrapAlignment.spaceAround,runAlignment: WrapAlignment.spaceAround,),Wrap(children: [Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('刘备'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('关羽'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('张飞'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('赵云'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('诸葛亮'),),Chip(avatar: CircleAvatar(backgroundColor: Colors.blue,child: Text('蜀'),),label: Text('黄忠'),),],)],);}
}

5.效果

四、层叠布局

1.Stack（层叠组件）

• alignment（声明未定位子组件的对齐方式）
• textDirection（声明未定位子组件的排列顺序）

2.Positioned（绝对定位组件）

• child（声明子组件）
• left、top、right、bottom
• width、height

3.NetworkImage（网络图片组件）

• NetworkImage（‘图片地址’）

4.代码

class Stackdemo extends StatelessWidget {const Stackdemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Container(child: Stack(textDirection: TextDirection.rtl,alignment: AlignmentDirectional.bottomEnd,children: [CircleAvatar(backgroundImage: NetworkImage('https://s1.ax1x.com/2022/10/31/xTY0Bt.jpg'),radius: 200,),Positioned(child: Container(color: Colors.black12,padding: EdgeInsets.all(10),child: Text('薇尔莉特',style: TextStyle(color: Colors.white,fontSize: 20),),),top: 50,right: 40,),Text('hello',style: TextStyle(color: Colors.black,fontSize: 20),),],),);}
}

5.效果

五、Card

1.Card（卡片）

• child（子组件）
• color（背景色）
• shadowColor（阴影色）
• elevation（阴影高度）
• shape（边框样式）
• margin（外边距）

2.ListTile（列表瓦片）

• leading（头部组件）
• title（标题）
• subtitle（子标题）

3.代码

class CartDemo extends StatelessWidget {const CartDemo({Key? key}) : super(key: key);@overrideWidget build(BuildContext context) {return Column(children: [Card(margin: EdgeInsets.all(30),color: Colors.green[100],shadowColor: Colors.yellow,elevation: 20,shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(40),side: BorderSide(color: Colors.yellow,width: 3,)),child: Column(children: const [ListTile(leading: Icon(Icons.accessible_forward_sharp,size: 50,),title: Text("OTTO",style: TextStyle(fontSize: 20),),subtitle: Text("吉吉国王",style: TextStyle(fontSize: 20),),),Divider(),ListTile(title: Text("电话：000000000",style: TextStyle(fontSize: 20),),),ListTile(title: Text("地址：xxxxxxx",style: TextStyle(fontSize: 20),),)],),),Card(child: Column(children: const [ListTile(leading: Icon(Icons.accessible_forward_sharp,size: 50,),title: Text("OTTO",style: TextStyle(fontSize: 20),),subtitle: Text("吉吉国王",style: TextStyle(fontSize: 20),),),Divider(),ListTile(title: Text("电话：000000000",style: TextStyle(fontSize: 20),),),ListTile(title: Text("地址：xxxxxxx",style: TextStyle(fontSize: 20),),)],),)],);}
}

4.效果

FLUTTER学习笔记--布局相关推荐

1. Flutter学习笔记（10）--容器组件、图片组件

   如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件 上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...

2. Flutter学习笔记--Gridview网格组件制作相册

   Flutter学习笔记–Gridview网格组件制作相册 效果: GridView可以构建一个二维网格列表,其官方定义参考: https://book.flutterchina.club/chapte ...

3. Flutter学习笔记（二）登陆注册界面的实现

   Flutter学习笔记(二)登陆注册界面的实现 简单的登录和注册界面的布局 SharedPreferences存储数据 页面路由和参数传递的心得 这几天按照顺序先完成了登录和注册的页面,没有什么特别的 ...

4. Bootstrap学习笔记-布局

   Bootstrap学习笔记-布局 默认是响应式布局,就是你在改变页面的时候也不会出现乱的现象. <html> <head> <meta charset="utf ...

5. Flutter学习笔记 —— 完成一个简单的新闻展示页

   Flutter学习笔记 -- 完成一个简单的新闻展示页 前言 思路分析 案例代码 结束语 上图 前言 刚学Flutter不久,今天我们来看看如何使用 Container & ListView实 ...

6. Flutter学习-多子布局Widget

   Flutter学习-多子布局Widget 1. Flex 2. Row组件 2.1 Row组件介绍 2.2 属性解析 2.2.1 mainAxisSize 2.2.2 mainAxisAlignmen ...

7. Flutter学习笔记（一）

   Flutter学习笔记(一) 学习前言 dart安装 vscode配置 持续更新中 学习前言 最近准备学习Flutter,参考B站 Dart Flutter教程_2022精讲Dart Flutter3 ...

8. Flutter学习笔记（18）--Drawer抽屉组件

   如需转载,请注明出处:Flutter学习笔记(18)--Drawer抽屉组件 Drawer(抽屉组件)可以实现类似抽屉拉出和推入的效果,可以从侧边栏拉出导航面板.通常Drawer是和ListView组 ...

9. Flutter学习笔记之-圆形头像实现方式

   Flutter学习笔记之-圆形头像实现方式 开发中如何实现类似圆形图片 Container+BoxDecoration来实现圆角图像 class DemoWidget extends Stateles ...

最新文章

1. pytorch系列 -- 9 pytorch nn.init 中实现的初始化函数 uniform, normal, const, Xavier, He initialization...
2. 大数据风控之信贷审查的5大步骤及要点
3. 简单的实现图片预览, 通过原生ajax以及 jQuery两种方法实现图片预览,有更好的办法可以留言喔...................
4. TensorFlow学习笔记（二）MNIST入门
5. restful get不传参数404_你知道什么是 Restful 风格吗？SpringMVC 带我们实现它！
6. python实战讲解_Python数据可视化实战讲解
7. mysql join 循环_关于mysql联表的内嵌循环操作nested loop join中on和where执行顺序问题...
8. node 抓取api数据导出为excel表格
9. Ruby on Rails Exception：Routing Error
10. VC++ COleSafeArray VARIANT的使用
11. ISCC2018（misc）
12. 联通手机卡欠费了无法转接人工服务？
13. VOSviewer | （二）入门-分析web of science
14. c语言使用三种方法计算圆周率,求用三种方法计算圆周率(C语言)
15. android 浏览器内核 内存占用,移动浏览器的四大内核
16. 爬虫 requests User-Agent池 FakeUserAgent URL传参
17. oracle的成本核算,ORACLE-EBS-最新成本管理手册
18. 隔段时间网络就会变差，重启路由器恢复，这是为什么
19. 申请苹果公司版开发者账号实录【99美元，非299美元企业版账号】
20. 干货 | 奇秀直播连麦技术探索

热门文章

1. oppo手机解锁_oppo手机屏幕锁密码忘记了怎么办？oppo手机强制解锁教程
2. Spark操作Kudu
3. 1662_MIT 6.828 JOS check_page_free_list实现分析以及boot_alloc问题修复
4. 未能加载文件或程序集“xxx”或它的某一个依赖项。试图加载格式不正确的程序。
5. 我大三创业拿到 7 位数投资奇特生活
6. 家用路由器选购指南基于2019年5月（二）
7. 2023年天津中德应用技术大学专升本通信工程专业考试大纲
8. Ci2451无线MCU芯片2.4GHz射频芯片集成8位RISC内核集成无线收发器和8位RISC（精简指令集）MCU的SOC芯片
9. CodeForces - [ACM-ICPC Jiaozuo Onsite D]Honeycomb(BFS)
10. honeycomb react脚手架-部署～