颤动中的 TagView 模拟

Question

我想要 UI 这样的：原生的Android可以用https://github.com/whilu/AndroidTagView这样的库来完成，flutter怎么能完成呢？

Answer 1

您将要使用：

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

虽然 Chip 的边框宽度似乎不太容易设置，但整体功能是现成的

Answer 2

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

备注：

您可以调整 Wrap 小部件内的芯片之间的 space 使用 spacing
deleteIcon 仅在右侧，但您可以使用 avatar 在左侧显示图标
您可以使用 Shape 属性

Chip

 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))),
            ],
          ),
        ],
      ),

颤动中的 TagView 模拟

Analog for TagView in flutter

flutter

flutter-layout