我可以在 Flutter 中做这个设计吗？答案

【问题标题】：Can I do this design in Flutter?我可以在 Flutter 中做这个设计吗？
【发布时间】：2022-01-22 19:39:13
【问题描述】：

我可以这样做吗

Flutter 中的设计。关键是一行中的按钮数量取决于按钮的大小，因此 crossAxisCount 不固定。如果没有足够的空间，我不知道如何在下一行放置一个按钮。

Container(
                          color: Colors.red,
                          width: appWidth * 0.8,
                          child: Row(
                            children: [
                              for (var i in provider.getFilterButtons)
                                Row(
                                  children: [
                                    SizedBox(
                                      height: appHeight * 0.05,
                                      child: OutlinedButton(
                                        onPressed: () {},
                                        child: Row(
                                          children: [
                                            Text(
                                              '${i.name}: ${i.value}',
                                              style: TextStyle(
                                                  fontSize: appHeight * 0.021),
                                            ),
                                            IconButton(
                                              padding: EdgeInsets.zero,
                                              constraints:
                                                  const BoxConstraints(),
                                              onPressed: () {},
                                              iconSize: appHeight * 0.02,
                                              icon: const Icon(
                                                Icons.close,
                                                color: Colors.black,
                                              ),
                                            )
                                          ],
                                        ),
                                        style: OutlinedButton.styleFrom(
                                          onSurface: Colors.red,
                                          side: const BorderSide(
                                            color: AppColors.lightPurple,
                                          ),
                                        ),
                                      ),
                                    ),
                                    SizedBox(width: appWidth * 0.02),
                                  ],
                                ),
                            ],
                          ),
                        )

【问题讨论】：

您尝试过使用 Wrap 小部件吗？ api.flutter.dev/flutter/widgets/Wrap-class.html
最好的方法是使用Wrap and Chip，Chip(label: Text("Chip"), deleteIcon: Icon(Icons.close), deleteIconColor: Colors.black54, onDeleted: () { print ("Delete"); }, deleteButtonTooltipMessage: "Tooltip", shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0), ), labelStyle: TextStyle(color: Colors.black54), backgroundColor: Colors.white, ),跨度>

标签： flutter flutter-layout

【解决方案1】：

检查下面的代码它会帮助你，

class CustomTag extends StatefulWidget {
  const CustomTag({Key key}) : super(key: key);

  @override
  _CustomTagState createState() => _CustomTagState();
}

class _CustomTagState extends State<CustomTag> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Center(
          child: Wrap(
            spacing: 8.0,
            runSpacing: 8.0,
            children: [
              tag(name: "Name: iPad"),
              tag(name: "Name: iPad 1"),
              tag(name: "Name: iPad 2"),
              tag(name: "Name: iPad Mob 3"),
              tag(name: "iPad 4"),
              tag(name: "Name: iPad"),
              tag(name: "Name: iPad 6"),
            ],
          ),
        ),
      ),
    );
  }

  Widget tag({String name}) {
    return Container(
      padding: EdgeInsets.all(8.0),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        border: Border.all(color: Colors.purple),
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          Text(
            name ?? "",
            style: TextStyle(color: Colors.purple),
          ),
          Icon(
            Icons.close,
            size: 16.0,
            color: Colors.black,
          ),
        ],
      ),
    );
  }
}

【讨论】：

【解决方案2】：

而不是使用 row 来显示那些由 for 循环生成的项目。你可以使用 Wrap。

Container(
    color: Colors.red,
    width: appWidth * 0.8,
    child: Wrap(
        children: [
            for (var i in provider.getFilterButtons)
                Row(

【讨论】：