Flutter Wrap 组件

代码语言：javascript复制

**
    Wrap({
    Key key,
    this.direction = Axis.horizontal,//主轴（mainAxis）的方向，默认为水平。
    this.alignment = WrapAlignment.start,//主轴方向上的对齐方式，默认为start。
    this.spacing = 0.0,//主轴方向上的间距。
    this.runAlignment = WrapAlignment.start,//run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行。
    this.runSpacing = 0.0,//run的间距。
    this.crossAxisAlignment = WrapCrossAlignment.start,//交叉轴（crossAxis）方向上的对齐方式。
    this.textDirection,//文本方向。
    this.verticalDirection = VerticalDirection.down,//定义了children摆放顺序，默认是down，见Flex相关属性介绍。
    List<Widget> children = const <Widget>[],//
    })
 */

属性解析

direction：主轴（mainAxis）的方向，默认为水平。

alignment：主轴方向上的对齐方式，默认为start。

spacing：主轴方向上的间距。

runAlignment：run的对齐方式。run可以理解为新的行或者列，如果是水平方向布局的话，run可以理解为新的一行。

runSpacing：run的间距。

crossAxisAlignment：交叉轴（crossAxis）方向上的对齐方式。

textDirection：文本方向。

verticalDirection：定义了children摆放顺序，默认是down，见Flex相关属性介绍。

Simulator Screen Shot - iPhone 11 Pro Max - 2019-09-24 at 17.47.17.png

代码语言：javascript复制

import 'package:flutter/material.dart';

class WrapPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Warp Demo"),
        backgroundColor: Colors.blue[400],
      ),
      body: Container(
        child: Wrap(children: <Widget>[
          for (String item in tags) TagItem(item)
        ]),
      ),
    );
  }
}

class TagItem extends StatelessWidget {
  final String text;

  TagItem(this.text);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 40,
      margin: EdgeInsets.symmetric(vertical: 5, horizontal: 5),
      decoration: BoxDecoration(
          border:  Border.all(color: Colors.blueAccent.withAlpha(60), width: 1.0),
          borderRadius: BorderRadius.all(Radius.circular(5))),
      child: Container(
        margin: EdgeInsets.all(8),
        child: Text(text),
      ),
    );
  }
}

const List<String> tags = [
  "肯德基",
  "小哥哥你的东西掉了",
  "小姐姐好漂亮啊",
  "这个东西是啥",
  "哈哈哈",
  "好困啊",
  "今天好运",
  "明天好运来",
  "今年快结束了",
  "我累啊",
  "你写的什么代码",
  "多多多"
];

iphone png screen simulator spacing

0 人点赞