flutter - flutter 中的 TagView 模拟

Question

我想要这样的用户界面: 对于 native Android，可以使用 https://github.com/whilu/AndroidTagView 等库来完成，用flutter怎么办？

Answer 1

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

注释:

• 您可以调整 Wrap 小部件内的芯片之间的空间使用 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))),
            ],
          ),
        ],
      ),