• 0

  • 491

  • 收藏

Flutter基础-011-Wrap流式布局

智能的司机

我是老司机

2个月前
属性
Wrap({
    Key key,
    this.direction = Axis.horizontal,// 水平或垂直
    this.alignment = WrapAlignment.start,// 对齐方式,左对齐,右对齐等
    this.spacing = 0.0,// 子widget之间的间距,水平间距或垂直间距
    this.runAlignment = WrapAlignment.start,// 纵轴方向的对齐方式
    this.runSpacing = 0.0,//纵轴方向的间距
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
  }) 
复制代码
主要特点
  • 当使用Row 时,宽度超过屏幕宽时,超过部分无法显示。
  • 使用Wrap时,超过屏幕宽度时,自动换行。
  • 可以水平使用,也可以垂直使用

image.png

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              mainAxisAlignment: MainAxisAlignment.start,//
              //在水平方向上,这个Row占据的大小
              mainAxisSize: MainAxisSize.max,//默认值  尽可能多占据
              children: <Widget>[
                Text(" 1111111 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 5555555 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.green),),

              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              alignment: WrapAlignment.start,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              alignment: WrapAlignment.end,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.green),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.green),),
              ],
            ),
            Wrap(
              direction: Axis.horizontal,
              spacing: 10,
              runSpacing: 10,
              runAlignment: WrapAlignment.start,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.orange),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.orange),),
              ],
            ),
            Wrap(
              direction: Axis.vertical,
              spacing: 20,
              children: <Widget>[
                Text(" 11111111 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 2222222222 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 333333 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 44444444444444 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 55555 ",style: TextStyle(backgroundColor: Colors.blue),),
                Text(" 66666 ",style: TextStyle(backgroundColor: Colors.blue),),
              ],
            ),

          ],
        ),
      ),
    );
  }
}
复制代码
免责声明:文章版权归原作者所有,其内容与观点不代表Unitimes立场,亦不构成任何投资意见或建议。

491

相关文章推荐

未登录头像

暂无评论