前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Wrap 组件

Flutter Wrap 组件

作者头像
赵哥窟
发布2019-09-25 15:36:07
7380
发布2019-09-25 15:36:07
举报
**
    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

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 = [
  "肯德基",
  "小哥哥你的东西掉了",
  "小姐姐好漂亮啊",
  "这个东西是啥",
  "哈哈哈",
  "好困啊",
  "今天好运",
  "明天好运来",
  "今年快结束了",
  "我累啊",
  "你写的什么代码",
  "多多多"
];
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2019.09.24 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 属性解析
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档