zoukankan      html  css  js  c++  java
  • Wrap(每日Flutter 小部件)

     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>[],//
        })
     */
    

      

    import 'package:flutter/material.dart';
    
    class WrapWidget extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return getV(context);
      }
    
      Widget getV(BuildContext context) {
        var children = <Widget>[];
        for (String item in tags) {
          children.add(TagItem(item));
        }
        return Container(
          child: Wrap(children: children),
        );
      }
    }
    
    const List<String> tags = [
      "肯德基",
      "小哥哥你的东西掉了",
      "小姐姐好漂亮啊",
      "这个东西是啥",
      "哈哈哈",
      "好困啊",
      "今天好运",
      "明天好运来",
      "今年快结束了",
      "我累啊",
      "你写的什么代码",
      "多多多"
    ];
    
    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),  1.0),
              borderRadius: BorderRadius.all(Radius.circular(5))),
          child: Container(
            margin: EdgeInsets.all(8),
            child: Text(text),
          ),
        );
      }
    }
    

      

  • 相关阅读:
    jQuery基础学习5——JavaScript方法获取页面中的元素
    jQuery基础学习4——jQuery容错性
    jQuery基础学习3——jQuery库冲突
    jQuery基础学习2——DOM和jQuery对象
    Windows Server 2003 R2 64位简体中文版下载
    jQuery基础学习1
    关闭Linux里边的selinux
    linux下安装apache详解
    Autolayout学习(1)-了解Autoreszing
    新浪微博客户端(64)-下拉放大
  • 原文地址:https://www.cnblogs.com/wjw334/p/12739356.html
Copyright © 2011-2022 走看看