颤动中 TagView 的模拟

Question

我想要这样的用户界面： 对于原生 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))),
            ],
          ),
        ],
      ),