将列表添加到不滚动的列答案

【问题标题】：Adding list to column that does not scroll将列表添加到不滚动的列
【发布时间】：2018-06-05 19:11:20
【问题描述】：

所以我的 UI 构建在 ListView 中，它可以滚动并且很好，我将在底部有许多相同小部件的实例，如何添加这些小部件而不将它们放在另一个 ListView 中？如果我这样做，用户可以滚动内部而不是父级。

我将从数据库中提取ContestBar 小部件的数量，该数据库还将包含每个小部件的信息。必须有一种方法来动态填充这些而不将它们放在列表视图中，因为我希望整个屏幕滚动而不仅仅是 ContestBar 小部件。

这里是代码...

@override
  Widget build(BuildContext context) {
    return RefreshIndicator(
      onRefresh: _onRefresh,
      child: ListView(
        children: <Widget>[
          Container(
            width: double.infinity,
            height: 150.0,
            color: Colors.black,
          ),
          ProfileBar(
            displayName: 'Zach S.',
            points: 1324,
            balance: 256.15,
            initials: 'ZS',
          ),
          Container(
            height: 64.0,
            decoration: const BoxDecoration(
              border: const Border(bottom: const BorderSide(width: 1.0, color: Colors.black12)),
            ),
            padding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 16.0),
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: List<Padding>.generate(sortChipNames.length, (int index) {
                return Padding(
                  padding: const EdgeInsets.only(right: 8.0),
                  child: ChoiceChip(
                    label: Text(sortChipNames[index]),
                    selected: _selectedChips.contains(index),
                    onSelected: (bool selected) {
                      setState(() {
                        _selectedChips.contains(index) ? _selectedChips.remove(index)
                                                       : _selectedChips.add(index);
                      });
                    },
                  ),
                );
              }),
            ),
          ),
          // Here is the instance of the same widget, this will eventually come from a database and have way more than 5.
          ContestBar(),
          ContestBar(),
          ContestBar(),
          ContestBar(),
          ContestBar(),
        ],
      ),
    );
  }

【问题讨论】：

标签： dart flutter

【解决方案1】：

好的，我可以通过添加Flex 小部件，将direction 属性设置为Axis.vertical 并将children 设置为ContestBar 小部件的列表来使其工作。代码如下。

名单

final List<ContestBar> testContests = <ContestBar>[
  ContestBar(),
  ContestBar(),
  ContestBar(),
  ContestBar(),
  ContestBar(),
];

小部件

Flex(
  direction: Axis.vertical,
  children: testContests,
),

【讨论】：