---

前言

• Flutter 作为Google出品的一个新兴的跨平台移动客户端UI开发框架，正在被越来越多的开发者和组织使用，包括阿里的咸鱼、腾讯的微信等。
  示意图

示意图

今天，我主要讲解Flutter中布局方面的组件Widget，类型如下，希望你们会喜欢。

示意图

---

1. 边距属性

主要包括：padding、margin、alignment

1.1 padding属性

• 简介：内边距，即本Widget边框和内容区之间距离
• 示意图

• 使用：采用EdgeInsets类

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例：4个方向各添加16像素补白
padding: EdgeInsets.all(16.0)

// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
padding: const EdgeInsets.fromLTRB(10,20,30,40)

// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例：在左边添加8像素补白
padding: const EdgeInsets.only(left: 8.0),

// 4. 设置对称方向的填充
// vertical：针对垂直方向top、bottom
// horizontal：针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素补白
padding: const EdgeInsets.symmetric(vertical: 8.0)

1.2 margin属性

• 定义：外边距，即本Widget与父边框的距离
• 示意图

• 使用：采用EdgeInsets类

// 1. 所有方向均使用相同数值的填充。
all(double value) 
// 示例：4个方向各添加16像素补白
margin: EdgeInsets.all(16.0)

// 2. 分别指定四个方向的不同填充
fromLTRB(double left, double top, double right, double bottom)
// 示例：
margin：const EdgeInsets.fromLTRB(10,20,30,40)

// 3. 设置具体某个方向的填充(可以同时指定多个方向)
only({left, top, right ,bottom })
// 示例：在左边添加8像素补白
margin：const EdgeInsets.only(left: 8.0),

// 4. 设置对称方向的填充
// vertical：针对垂直方向top、bottom
// horizontal：针对横向方向left、right
symmetric({ vertical, horizontal })
// 示例：垂直方向上下各添加8像素补白
margin：const EdgeInsets.symmetric(vertical: 8.0)

1.3 alignment

• 简介：子Widget对齐，生效范围：父Widget尺寸 > child Widget尺寸
• 使用

// 居中 & 各方向对齐
center
centerLeft
centerRight

// 底部对齐 & 各方向对齐
bottomCenter
bottomLeft
bottomRight

// 顶部对齐 & 各方向对齐
topCenter
topLeft
topRight

// 示例
alignment：Alignment.center

---

2. 基础布局组件

主要包括：

• Container
• Row
• Column
• Expanded
• center

具体请看文章：Android Flutter：那些不可忽视的基础布局！

---

3. 列表布局组件

Flutter常用的滚动型列表组件包括：GridView组件 + ListView组件

具体请看文章：

• Flutter：手把手教你使用滚动型列表组件：ListView

• Flutter：手把手教你使用滚动型列表组件GirdView

---

4. 导航栏组件

主要包括：

• 顶部导航栏：TabBar + TabBarView + TabController
• 底部导航栏：BottomNavigationBar

具体请看文章：

• Flutter 顶部导航栏实现：TabBar + TabBarView + TabController

• Android Flutter BottomNavigationBar：该如何优雅实现底部导航栏？

---

5. 总结

• 本文全面介绍了Flutter的布局组件使用，包括边距常用属性、基础布局等
• 接下来推出的文章，我将继续讲解Flutter的相关知识，包括使用语法、实战等，感兴趣的读者可以继续关注我的博客哦：Carson_Ho的Android博客

---

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

相关文章阅读
Android开发：最全面、最易懂的Android屏幕适配解决方案
Android开发：史上最全的Android消息推送解决方案
Android开发：最全面、最易懂的Webview详解
Android开发：JSON简介及最全面解析方法!
Android四大组件：Service服务史上最全面解析
Android四大组件：BroadcastReceiver史上最全面解析

---

欢迎关注Carson_Ho的简书！

不定期分享关于安卓开发的干货，追求短、平、快，但却不缺深度。