将列表添加到不滚动的列

时间:2018-06-05 19:11:21

标签: dart flutter

所以我的我的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(),
        ],
      ),
    );
  }

1 个答案:

答案 0 :(得分:0)

好的,我可以通过添加Flex小部件,将direction属性设置为Axis.vertical并将children设置为{{ 1}}小部件。代码如下。

列表

ContestBar

小部件

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