Flutter Wrap

Wrap组件

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

• Flutter RaisedButton(按钮组件)
  Flutter中通过RaisedButton定义一个按钮,RaisedButton里面有很多的参数这页中只简单使用一下
  先简单定义一个按钮组件,用于后面Wrap组件来排列

/**
 * 自定义一个按钮组件
 * 构造函数接收外部传入的文字
 */
class MyButton extends StatelessWidget{
  final String text;
  const MyButton(this.text,{Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){},  //- 点击事件
    );
  }
}

Wrap 属性

属性	说明
direction	主轴的方向,默认是水平方向
alignment	主轴的对齐方式
spacing	主轴方向的间距
textDirection	文本方向
verticalDirection	定义了children摆放顺序,默认是down,见Flex相关属性介绍
runAlignment	run的对齐方式,run可以理解为新的行或者列,如果是水平方向布局的话,run可以结尾新的一行
runSpacing	run的间距

direction 属性如果想要实现纵轴的排列方式(从上往下),我们可以这样设置:

Wrap(
  direction:Axis.vertical
)

我们现在把Wrap组件引入,并且调用前面写的按钮组件.

import "package:flutter/material.dart";

void main() => runApp(MyApp());
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      child: MaterialApp(
        title: 'belineApp',
        home: Scaffold(
          appBar: AppBar(
            title: Text('Wrap'),
          ),
          body: LayoutDemo()
        )
      )
    );
  }
}
class LayoutDemo  extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Wrap(
      spacing: 10, //- 横轴元素间的间距
      runSpacing: 10, //- 纵轴间距
      alignment: WrapAlignment.spaceBetween, //- 两边对齐
      children: [
        MyButton('标签一'),
        MyButton('标签二'),
        MyButton('标签三标签3'),
        MyButton('标签四'),
        MyButton('标签五标签554'),
        MyButton('标签六'),
        MyButton('标签七32131231'),
        MyButton('标签八'),
      ],
    );
  }
}
/**
 * 自定义一个按钮组件
 * 构造函数接收外部传入的文字
 */
class MyButton extends StatelessWidget{
  final String text;
  const MyButton(this.text,{Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return RaisedButton(
      child: Text(this.text),
      textColor: Theme.of(context).accentColor,
      onPressed: (){},  //- 点击事件
    );
  }
}

页面效果:

image.png