布局组件

---

Container

背景，边框，或阴影，外边距、内边距，尺寸等

参数	描述
padding	内边距
margin	外边距
child	组件
color	颜色
width	宽度
height	高度
decoration	样式
alignment	对齐方式

宽度高度无限

width: double.infinity

height: double.infinity

constraints: BoxConstraints(
    minWidth: 200, // 最小宽度
    minHeight:200,
    maxWidth: 500, // 最大宽度
    maxHeight:500,
),

BoxDecoration(
  color: Colors.red,  // 颜色

  // 图片
  image: DecorationImage(
    image: AssetImage('assets/image/02.jpeg'),
    fit: BoxFit.cover, // 填充方式
  ),

  // 边框
  border: Border.all(  
    width: 3,
    color: Colors.red,
  ),

  borderRadius: BorderRadius.all(Radius.circular(12))  // 圆角

  // 渐变
  gradient: LinearGradient(  
    colors: [
        Colors.red,
        Colors.blue,
    ],
  ),

  // 阴影
  boxShadow: [
    BoxShadow(color: Color(0xffcfd2d5), blurRadius: 15)
  ],
)

---

水平 与 垂直

主轴

mainAxisAlignment // 主轴

mainAxisAlignment: MainAxisAlignment.spaceEvenly // 主轴 空间均匀

mainAxisAlignment: MainAxisAlignment.center // 剧中

交叉轴

crossAxisAlignment // 交叉轴

Column

垂直

Row

水平

---

Center

剧中

Center(
  child: ,
)

---

ListTile

参数	描述
onLongPress	点击事件

演示

ListTile(
  leading: CircleAvatar(
    backgroundImage: NetworkImage(imageUrl),  // 将图像或图标添加到列表的开
  ),
  title: Text('Horse'),  // 标题
  trailing: Icon(Icons.keyboard_arrow_right),  // 列表的末尾放置一个图像
  subtitle: Text('A strong animal'),  副标题是标题下面较小的文本
)

---

Expanded

填满整个区域, 如果多个 Expanded 会让子组件填满区域

参数	描述
child	组件
flex	大小占比

---

GridView

网格, 自动支持滚动.

---

ListView

支持滚动

参数	备注
children	组件
physics	滚动效果

---

ListView.builder

参数	备注
padding	内边距
itemBuilder	组件
itemCount	放入组件的数量
physics	滚动效果

代码

ListView.builder(
  padding: const EdgeInsets.all(16.0),
  itemBuilder: /*1*/ (context, i) {
    if (i >= _suggestions.length) {
      // 滑动到底时执行
    }

    // 返回的组件
    return Text(
        _suggestions[i].asPascalCase,
      );
  },
)

---

Stack

层叠布局

参数	备注
child	组件

// 子组件剧中
alignment:Alignment.center

// 未定位widget占满Stack整个空间
fit: StackFit.expand

---

Align

布局 可以指定放置方向

参数	备注
child	组件
alignment	Alignment

Alignment

Alignment.topCenter 上方剧中

Alignment.bottomCenter 下方剧中

---

Positioned

绝对定位

参数	备注
child	组件
left	左
top	上
right	右
bottom	下
width	高度
height	宽度

---

Card

参数	备注
child	组件
color	颜色
shadowColor	阴影颜色
elevation	阴影高度
margin	外边距
shape	边框样式 RoundedRectangleBorder()

---

SingleChildScrollView

滚动布局

参数	备注
child	组件
padding	内边距
reverse	初始滚动位置 false 头 true 尾
physics	滚动效果
scrollDirection	水平滚动 或 垂直滚动

scrollDirection

Axis.horizontal 水平滚动

Axis.vertical 垂直滚动

---

SafeArea

解决异形屏幕 适应屏幕

参数	备注
child	组件

---

Padding

内边距

参数	备注
child	组件
padding	内边距

---

SizedBox

盒子

参数	备注
child	组件
width	宽度
height	高度

---

Flex

---

Wrap

流式布局

---

GridView

---

LayoutBuilder

相应试布局

LayoutBuilder(
  builder: (context, constraints) {
    if (constraints.maxWidth > 700) {
      return tRow;  // 返回组件
    } else {
      return tRow2;  // 返回组件
    }
  },
)

备注

constraints.maxWidth 获取到屏幕宽度

---

Slivers

CustomScrollView

一个列表

参数	描述
slivers	Slivers组件 存放

SliverToBoxAdapter

可以将普通组件转成 Slivers 组件

参数	描述
child	组件

SliverList

列表

SliverChildBuilderDelegate

可以动态加载

SliverList(
    delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
            height: 200,
            color: Colors.primaries[index % 18],
        );
    },
    childCount: 50,  // 显示多少个
    ),
),

SliverChildListDelegate

无法动态加载

SliverList(
  delegate: SliverChildListDelegate(
      [
        Text('111'),
        Text('111'),
        Text('111'),
        Text('111'),
      ]
  ),
),

SliverFixedExtentList

未学习

SliverGrid

网格

SliverGrid(
    gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3  // 每行显示几个
    ),
    delegate: SliverChildBuilderDelegate((context, index) {
        return Container(
            height: 400,
            color: Colors.primaries[index % 18],
        );
    },
    childCount: 50,  // 显示多少个
    ),
)

SliverAppBar

顶部 向下滑动有隐藏效果

SliverAppBar(
  title: Text('测试'),
  floating: true,  // 漂浮
  pinned: true,  // 固定
),

SliverFillRemaining

填满视窗剩余部分

参数	描述
child	组件

---

Spacer

显示空间大小

参数	描述
flex	占据空间比例 int

---