时间戳

首页 > 解决方案 > 将列表添加到不滚动的列

dart - 将列表添加到不滚动的列

问题描述

因此，我将 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(),
        ],
      ),
    );
  }

标签： dartflutter

解决方案

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

名单

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

小部件

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

推荐阅读