Flutter布局-Stack组件

Stack表示堆的意思，我们可以用Stack或者Stack结合Align或者Stack结合Position来实现页面的定位布局。

名称	说明
alignment	配置所有子元素的显示位置
children	子组件

dart

Stack(
    alignment: Alignment.center,
    children: <Widget>[
      Container(
        height: 400,
        width: 300,
        color: Colors.red,
      ),
      Text("woshi wenben"),
    ],
  ),

Flutter布局-Stack Align

名称	说明
alignment	配置所有子元素的显示位置
child	子组件

dart

Stack(
    children: <Widget>[
      Align(
        alignment: Alignment(1, 0),
        child: Icon(Icons.home, size: 40, color: Colors.white),
      ),
      
      Align(
        alignment: Alignment.center,
        child: Icon(Icons.cached, size: 60, color: Colors.white),
      ),
    ],
  ),

Flutter布局-Stack Positioned

Stack和Positioned 组件控制每个子元素的显示位置

名称	说明
top	子元素距离顶部的距离
left	子元素距离左侧的距离
bottom	子元素距离底部的距离
right	子元素距离右部的距离
child	子组件

dart

child: Stack(
  children: <Widget>[
    Align(
      alignment: Alignment(1, 0),
      child: Icon(Icons.home, size: 40, color: Colors.white),
    ),
    Positioned(
      top: 10.0,
      left: 230.0,
      child: Icon(Icons.search, size: 20, color: Colors.white),
    ),
  ],
),

Flutter布局-Expanded组件

类似于web中的flex布局, Expanded组件中设置子元素宽度无效

名称	说明
flex	元素占整个父元素的比例(不写按元素的比例自适应)
child	子元素

dart

class MyRow extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(
      children: <Widget>[
        Expanded(
          child: IconContainer(Icons.home, Colors.black, 32.0),
        ),
        Expanded(
          flex: 2,
          child: IconContainer(Icons.ac_unit, Colors.yellow, 32.0),
        ),
      ],
    );
  }
}