Question

我想要这样的UI：借助原生Android，可以使用https://github.com/whilu/AndroidTagView之类的库来完成，如何使用flutter来完成？

Answer 1

您可以通过将Wrap和Chip小部件组合为@wasyl montioned来制作相同的UI。但这是有关您需要的完整示例

注释：

您可以调整Wrap小部件内芯片之间的空间使用spacing
deleteIcon仅在右侧，但是您可以使用avatar在左侧显示图标
您可以使用Chip属性设置Shape边框颜色和宽度

 new Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          new Wrap(
            children: <Widget>[
              Chip(
                label: new Text("Java"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
              Chip(
                label: new Text("C++"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
              Chip(
                label: new Text("Python"),
                onDeleted: () {},
                labelPadding: EdgeInsets.all(2.0),
                deleteIcon: Icon(Icons.clear),
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Wrap(
            spacing: 5.0,
            children: <Widget>[
              Chip(
                label: new Text("China"),
                backgroundColor: Colors.pinkAccent,
              ),
              Chip(
                label: new Text("USA"),
                backgroundColor: Colors.greenAccent,
              ),
              Chip(
                label: new Text("Austria"),
                backgroundColor: Colors.purpleAccent,
              ),
            ],
          ),
          new SizedBox(
            height: 10.0,
          ),
          new Wrap(
            textDirection: TextDirection.rtl,
            spacing: 5.0,
            children: <Widget>[
              Chip(
                  label: new Text("نجربة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
              Chip(
                  label: new Text("كتابة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
              Chip(
                  label: new Text("مختلفة"),
                  avatar: Icon(Icons.clear),
                  backgroundColor: Colors.transparent,
                  shape: new BeveledRectangleBorder(side: BorderSide(color: Colors.grey))),
            ],
          ),
        ],
      ),

Answer 2

您将要使用：

一个Wrap widget，让您的筹码（标签）一个接一个地定位，溢出到下一行
Chip widget用于带有文本，可选的删除按钮，删除回调等的材料设计芯片。

虽然似乎无法轻松设置芯片的边框宽度，但是整体功能很容易获得

抖动中的TagView的模拟

2 个答案: