如何在容器或卡片上包裹多个轮廓按钮

Question

我正在尝试将几个轮廓按钮包装在容器或卡片上。我希望按钮环绕容器或卡片小部件。

挑战在于我们不知道到底有多少个轮廓按钮会细化一条线，因此我们需要容器来包裹按钮。

用户界面应该如下所示。

Answer 1

基本上，

Wrap

小部件就是您正在寻找的！

示例：

Container(
          color: Colors.grey,
          child: Wrap(
            spacing: 5.0,
            runSpacing: 5.0,
            children: [
              button("Button One"),
              button("Button Two"),
              button("Button Three"),
              button("Button Four"),
              button("Button Five"),
              button("Button Six"),
              button("T"),
              button("Long text goes here"),
              button("Another long text goes here as well"),
              button("Hello, world"),
              button("Button"),
            ],
          ),
        ),

_{该示例包含硬编码的}

OutlinedButton

，请随意添加适当的小部件（例如

ChoiceChip

或标准

Chip

）。

Wrap 动态地负责将其子项移动（换行）到下一行。请注意，外部 Container 高度是根据其子（Wrap）高度动态变化的。

输出：

Answer 2

您可以使用下面的小部件。 Wrap 小部件可确保按钮在不水平放置时自动移动到下一行。

 class TrendingSearches extends StatelessWidget {
  final List<String> trendingSearches = [
    'caitlin clark',
    'nfl schedule 2024',
    'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024', 'caitlin clark',
    'nfl schedule 2024'];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Trending Searches'),
      ),
      body: Container(
        decoration: const BoxDecoration(color: Colors.grey),
        child: Wrap(
          spacing: 8.0, // Placement between elements
          runSpacing: 8.0, // Bottom line transition spaces
          children: trendingSearches.map((searchTerm) {
            return Chip(
              label: Text(searchTerm),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10.0),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}