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

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

App结构

Text

• textDirection
• textStyle
  • colors 颜色
  • fontWeight 粗细
  • fontStyle 样式
  • TextAlign 对齐
  • TextOverflow 溢出
  • maxLines 显示行数
• RichText（Text.rich）
  • TextSpan
    • children

布局 Container

盒子模型

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

• child 声明子组件
• padding（margin）
  • EdgeInsets（all()、fromLTRB()、only()）
• decoration
  • BoxDecoration（边框，圆角、渐变、阴影、背景色、背景图片）
    • border
    • Border
      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、bottom
  • width、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
      • borderRadius
      • side
        • BorderSide
          • color
          • width
  • margin外边距
• ListTile列表碎片
  • leading 头部组件
  • title 标题
  • subtitle 子标题

按钮

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

常用按钮与改动

• flutter 1.22之前
  • FlatButton 扁平按钮
  • RaisedButton 凸起按钮
  • OutlineButton 轮廓按钮
• flutter 1.22之后

TextButton 文本按钮(替换flatButton)

对应主题：TextButtonTheme

OutlineButton(替换raisedButton)

对应主题：OutlineButtonTheme

ElevatedButton(替换OutlineButton)

对应主题：ElevatedButtonTheme

其他按钮

图标按钮

• IconButton
• TextButton.icon()
• ElevatedButton.icon()
• OutlinedButton.icon()

ButtonBar 按钮组

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

• FloatingButton 浮动按钮
• BackButton 回退按钮
• CloseButton 关闭按钮

常用属性与对应子组件

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

以OutlineButton为例

• onPressed
• onLongPress
• child
• style
  • ButtonStyle
    • testStyle、foreGroundColor、backgroundColor、shape、side、minimumSize、overlyColor（水波纹效果的颜色）
      • MaterialStateProperty
        • resolveWith
          返回按钮状态MaterialState.pressed…
        • all

图片

• Image.asset(‘本地路径’)
  • Flutter项目下 创建图片存储目录
  • 在pubspec.yaml中的flutter部分添加图片配置
• Image.network(‘src’) 加载网络图片