Flutter中Wrap组件

Wrap 可以实现流布局，单行的 Wrap 跟 Row 表现几乎一致，单列的 Wrap 则跟 Row 表现几乎一致。但 Row 与 Column 都是单行单列的，Wrap 则突破了这个限制，mainAxis 上空间不足时，则向 crossAxis 上去扩展显示。

常见属性：

1. spacing 主轴方向上的间距；

2. runSpacing 副轴方向上的间距；

3. alignment 主轴的对其方式；

4. runAlignment 副轴方向上的对齐方式；

5. direction 主轴的方向，默认水平；

6. textDirection 文本方向；

7. verticalDirection 定义了 children 摆放顺序，默认是 down，与Flex 相关属性差不多；

代码示例：

import 'package:flutter/material.dart';

void main(){
    runApp(MyApp());
}

// 抽离成一个单独的组件
class MyApp extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return MaterialApp(
            home: Scaffold(
                // 导航条
                appBar:AppBar(title:Text('Flutter App')),
                // 主体
                body:HomeContent(),
            ),
            // 主题
            theme: ThemeData(primarySwatch:Colors.yellow),
        );
    }
}

// Wrap组件
class HomeContent extends StatelessWidget{
    @override
    Widget build(BuildContext context) {
        return Container(
            height:400,
            width:400,
            color:Colors.pink,
            child: Wrap(
                // 横向的间距
                spacing: 20,
                // 纵向的间距
                runSpacing: 5,

                // 横向的对齐方式
                alignment: WrapAlignment.start,
                // 纵向的对齐方式
                runAlignment: WrapAlignment.start,
                // 排列主轴方向，默认为横轴
                direction: Axis.vertical,

                children: <Widget>[
                    MyButton("第1集"),
                    MyButton("第2集"),  
                    MyButton("第3集"),  
                    MyButton("第4集"),  
                    MyButton("第5集"),
                    MyButton("第6集"),  
                    MyButton("第7集"),
                    MyButton("第8集"),  
                    MyButton("第9集"),
                    MyButton("第10集"),  
                    MyButton("第11集"),
                ],
            )
        );
    }
}

// 封装RaisedButton按钮组件
class MyButton extends StatelessWidget{
    final String text;
    const MyButton(this.text,{Key key,}):super(key: key);
    @override
    Widget build(BuildContext context) {
        return RaisedButton(
            child:Text(this.text),
            textColor: Theme.of(context).backgroundColor,
            onPressed:(){

            },
        );
    }
}

效果图如下：

猜你喜欢