Flutter常用组件——Text、布局（盒子、线性、流式、弹性）、按钮、图片_xymspace

网络投稿 02-07 2707

注：标题按照组件或属性的层级关系缩进

文章目录 App结构Text布局 Container盒子模型线性布局 Column弹性布局 Flex流式布局 Wrap层叠布局 Stack、PositionedCard布局按钮常用按钮与改动TextButton 文本按钮(替换flatButton)OutlineButton(替换raisedButton)ElevatedButton(替换OutlineButton) 其他按钮图标按钮ButtonBar 按钮组常用属性与对应子组件图片

App结构

Text textDirectiontextStyle colors 颜色fontWeight 粗细fontStyle 样式TextAlign 对齐TextOverflow 溢出maxLines 显示行数 RichText（Text.rich） TextSpan children 布局 Container 盒子模型

用于计算元素在页面中实际占用的空间

child 声明子组件padding（margin） EdgeInsets（all()、fromLTRB()、only()） decoration BoxDecoration（边框，圆角、渐变、阴影、背景色、背景图片） borderBorder all 或者 top, bottom, right, left BorderSide width, color borderRadius BorderRadius all Radius gradient(渐变，设置渐变后，背景色会失效) LinearGradient线性渐变 alignment Alignment transform Matrix4 平移 translate旋转 rotate缩放 scale斜切 skew 线性布局 Column

Column 主轴方向是垂直方向

Row 主轴方向是水平方向

mainAxisAlignment：MainAxisAlignment 主轴对齐方式 crossAxisAlignment：CrossAxisAlignment 主轴对齐方式 children：内容

弹性布局 Flex Flex direction 声明主轴方向mainAxisAlignment 声明主轴对齐方式textDirection 声明水平方向的排序crossAxisAlignment 声明交叉轴对齐方式verticalDirection 声明垂直方向的排列顺序children 子组件数组 Expanded 可伸缩组件 flex 声明弹性布局所占比例child 声明子组件流式布局 Wrap

row和Column无法处理内容溢出，要通过Wrap组件解决内容溢出问题。

Wrap 解决内容溢出问题 spacing 主轴方向子组件间距alignment 主轴方向的对齐问题runSpacing 纵轴方向子组件间距runAlignment 纵轴方向对齐方式 Chip 标签 CircleAvatar 圆形头像层叠布局 Stack、Positioned Stack 层叠组件，类似css中的z-index alignment 声明未定位子组件的对齐方式textDirection 声明未定位子组件排列顺序children 声明子组件 Positioned 绝对定位组件 child 声明子组件left、top、right、bottomwidth、height NetworkImage 网络图片组件注意网络权限配置问题，安卓配置：# src——main——AndroidManifest.xml <uses-permission android:name="android.permission.INTERNET"> # application 标签下 android:usesClearTextTraffic="true" NetworkImage(‘图片地址’); Card布局 Card child子组件color背景色shadowColor阴影色elevation阴影高度shape边框样式 RounderRectangleBorder borderRadiusside BorderSide colorwidth margin外边距 ListTile列表碎片 leading 头部组件title 标题subtitle 子标题按钮

以前按钮调整为统一的外观比较麻烦，需要自定义大量按钮样式。新按钮将外观属性集合为一个ButtonStyle，非常方便统一控制。

常用按钮与改动 flutter 1.22之前 FlatButton 扁平按钮RaisedButton 凸起按钮OutlineButton 轮廓按钮 flutter 1.22之后 TextButton 文本按钮(替换flatButton)

对应主题：TextButtonTheme

OutlineButton(替换raisedButton)

对应主题：OutlineButtonTheme

ElevatedButton(替换OutlineButton)

对应主题：ElevatedButtonTheme

其他按钮图标按钮 IconButtonTextButton.icon()ElevatedButton.icon()OutlinedButton.icon() ButtonBar 按钮组

当宽度足够容纳多个按钮时为一行排列，超过宽度则纵向排列。

FloatingButton 浮动按钮BackButton 回退按钮CloseButton 关闭按钮常用属性与对应子组件

当对应button的theme，button的style样式重复声明，theme样式失效。

以OutlineButton为例

onPressedonLongPresschildstyle ButtonStyle testStyle、foreGroundColor、backgroundColor、shape、side、minimumSize、overlyColor（水波纹效果的颜色） MaterialStateProperty resolveWith 返回按钮状态MaterialState.pressed…all 图片 Image.asset(‘本地路径’) Flutter项目下创建图片存储目录在pubspec.yaml中的flutter部分添加图片配置 Image.network(‘src’) 加载网络图片