flutter Wrap看我就够了用Wrap撸一个标签云

我们开发中经常会遇到一些标签如商品的SKU等,我们可以用Wrap来撸一个同时也谈谈对flutter布局的自己一些理解先看效果

kk.gif

首先我们先看一下系统给我们提供的Wrap

Wrap({
    Key key,
    this.direction = Axis.horizontal,
    this.alignment = WrapAlignment.start,
    this.spacing = 0.0,
    this.runAlignment = WrapAlignment.start,
    this.runSpacing = 0.0,
    this.crossAxisAlignment = WrapCrossAlignment.start,
    this.textDirection,
    this.verticalDirection = VerticalDirection.down,
    List<Widget> children = const <Widget>[],
  }) : super(key: key, children: children);

提供了很多属性,介绍一下属性都是干嘛的

1. direction 扩展方式 比如横向堆砌
2. alignment 对齐方式
3. spacing 主轴空隙间距
4. runAlignment run的对齐方式
5. runSpacing run空隙间距
6. crossAxisAlignment 交叉轴对齐方式
7. textDirection 文本对齐方向
8. verticalDirection 确定垂直放置子元素的顺序，以及如何在垂直方向上解释开始和结束，默认down
9. children 需要放置的组件列表

其实大家最好的方式就是写一个试试然后随意修改这些属性这样看起来比较直观.

然后说一下如何实现标签云

我的大致思路是用一个数组来记录选中和非选中的状态,然后在按钮中调用setState来修改数组中的状态,同时更新组件,那么说干就干

  List<String> titles = ["张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁"];
//此处声明一个状态数组默认第一个是选中状态
  List<bool> colorCheck = [true, false, false, false, false, false, false ];
//定义Wrap上的子组件,样式我们定义好,方法返回一个Widget传入一个index索引的参数
 Widget _addbtn(index)
  {
    Radius radius = Radius.circular(20);
    return GestureDetector(
        onTap: () {
      setState(() {
      //标记谁被选中了更改为ture其他改为false
        for (int i = 0; i < colorCheck.length; i++) {
          colorCheck[i] = (i == index);
        }
      });
    },
      child: 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)),
            color: colorCheck[index] ? Colors.blueAccent : Colors.white,
        ),
        child:  Container(
          margin: EdgeInsets.all(8),
          child: Text(titles[index]),
        ),
      ),
    );
  }

定义好我们Wrap上的子控件,下一步我们要通过索引标记每个子控件.我们看到Wrap属性中 List<Widget> children = const <Widget>[],有一个数组我们创建一个同样的数组然后赋给Wrap.
其中用到了asMap,不熟悉的朋友可以查看一下

List<Widget> _widgets(State state) {
    return titles.asMap().keys.map((index) => _addbtn(index)).toList();
  }

定义好后,我们在Wrap处调用

 child: new Wrap(
          alignment: WrapAlignment.start,
          children:  _widgets(this),
        ),

大功告成!

附上整个Widget中完整的代码方便大家指正

import 'package:flutter/material.dart';


class TagWidget extends StatefulWidget {
  @override
  _TagWidgetState createState() => _TagWidgetState();
}

class _TagWidgetState extends State<TagWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:AppBar(
        title: Text("Wrap"),
    ),
    body: Container(
      margin: const EdgeInsets.only(left:20,top: 15.0, bottom: 13.0,right: 0.0),
      child: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: new Wrap(
          alignment: WrapAlignment.start,
          children:  _widgets(this),
        ),
      )

    )
    );
  }
  //初始化
  List<String> titles = ["张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","张三", "张三是弟弟", "李四来了", "我","一次搞定","哈哈","你是谁","李四来了", "我","一次搞定","哈哈","你是谁","李四来了", "我","一次搞定","哈哈","你是谁","李四来了", "我","一次搞定","哈哈","你是谁","李四来了", "我","一次搞定","哈哈","你是谁"];
  List<bool> colorCheck = [true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false,true, false, false, false,false,false,false, false, false, false,false,false,false, false, false, false,false,false,false, false, false, false,false,false,false, false, false, false,false,false,false];
  Widget _addbtn(index)
  {
    Radius radius = Radius.circular(20);
    return GestureDetector(
        onTap: () {
      setState(() {
        for (int i = 0; i < colorCheck.length; i++) {
          colorCheck[i] = (i == index);
        }
      });
    },
      child: 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)),
            color: colorCheck[index] ? Colors.blueAccent : Colors.white,
        ),
        child:  Container(
          margin: EdgeInsets.all(8),
          child: Text(titles[index]),
        ),
      ),
    );
  }
  List<Widget> _widgets(State state) {
    return titles.asMap().keys.map((index) => _addbtn(index)).toList();
  }
}
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),
      ),
    );
  }
}

写在最后其实标签云一定还有更多好的实现方案希望大家多多交流,也可以对代码提出相关修改建议,谢谢大家!!