Flutter

Question

我希望我的屏幕可以滚动，所以我将所有内容都放在列表视图中。

现在我想在里面显示另一个Listview来显示一个List的详细信息。当我尝试这个时，会抛出一个错误——“展开的小部件必须放在 Flex 小部件内。”

Answer 1

I want my screen to be scrollable so I put everything in a Listview.

我认为你应该使用 CustomScrollView 和条子。

如果您是第一次听说裂片，或者它们看起来有点吓人，我建议您阅读 Emily Fortuna 写的这篇优秀的 article。

对于你的情况，我会这样做：

return CustomScrollView(
  slivers: <Widget>[
    SliverToBoxAdapter(
      // Put here all widgets that are not slivers.
      child: Container(),
    ),
    // Replace your ListView.builder with this:
    SliverList(
      delegate: SliverChildBuilderDelegate(
        (BuildContext context, int index) {
          return ListTile();
        },
      ),
    ),
  ],
);

Answer 2

在 listView.builder 中添加 shrinkWrap: true 并删除最上面的 Container 或将其替换为 Column。

Answer 3

在 listview.builder 中添加 shrinkWrap: true, physics: ScrollPhysics(),，在这种情况下 listview.builder 需要扩展的父级。 physics: ScrollPhysics() 将允许它保持其状态而无需滚动回第一个项目。此外，如果您不希望 listview.builder 被用户滚动，您可以使用 physics: NeverScrollableScrollPhysics()。

Answer 4

我在使用两个 ListViews 时遇到了这个问题，一个在另一个里面。除了这个解决方法外，对我没有任何帮助。

在嵌套的Listview中，用一个ConstrainedBox覆盖它并给它一些大的高度。并使用 'shrinkWrap: true' 两个 ListView。由于 shrinkwrap 会 trim 额外的 space，额外的高度将不是问题。

Flexible(
  child: ListView(
    children: <Widget>[
      //other Widgets here ...
      ConstrainedBox(
        constraints: BoxConstraints(maxHeight: 1000), // **THIS is the important part**
        child: ListView.builder(
          shrinkWrap: true,
          itemBuilder: (context, index) => _buildRow(index),
          itemCount: _elements.length,
        ),
      ),
    ],
  ),
),

Answer 5

我能够通过将主列包装在 SingleChildScrollView 中解决问题，然后将 ListView.builder 包装在 Container 中，为容器指定高度，然后再次将该容器包装在 SingleChildScrollView 中。我知道这很复杂，但对我有用！看代码就能看清楚了

 Scaffold(
    appBar: AppBar(
      centerTitle: true,
      backgroundColor: Colors.black,
      title: Text("Welcome, ${widget.myUser.name}"),
      actions: [
        InkWell(
          child: Container(
            alignment: Alignment.center,
            padding: EdgeInsets.only(right: 20),
            child: Icon(Icons.settings),
          ),
          onTap: () {},
        ),
      ],
    ),
    body: Padding(
      padding: EdgeInsets.symmetric(horizontal: 20),
      child: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.max,
          children: [
            _customerDetailsWidget(),
            SizedBox(
              height: 15,
            ),
            Container(
              child: Divider(
                color: Colors.grey[500],
              ),
            ),
            SizedBox(
              height: 15,
            ),
            _addProductText(),
            SingleChildScrollView(
                child: Container(
                  height: 500,
                  child: ListView.builder(
                    itemCount:1,
                    itemBuilder: (BuildContext context, int index) {
                      return Container(child: Text("HELLO WORLD"));
                    },
                  ),
                ))
          ],
        ),
      ),
    ),
  ),

Answer 6

就我而言，在 ListView.builder 中添加 physics: ScrollPhysics(), 使 ListView.builder 可滚动。

层次结构为 ListView > StreamBuilder > RefreshIndicator > ListView.builder .

Answer 7

这其实取决于你的布局。可能的情况可能是：

使用 ListView + ListView:

如果你想给你的第二个 ListView 全高。

ListView(
  children: [
    // Your other widgets ...
    ListView.builder(
      shrinkWrap: true, //    <-- Set this to true
      physics: ScrollPhysics(), // <-- Also change physics
      itemBuilder: ...,
    ),
  ],
)

使用 ListView + ListView:

如果你想限制你第二个的高度ListView。

ListView(
  children: [
    // Your other widgets ...
    SizedBox( //             <-- Use SizedBox
      height: 160, 
      child: ListView.builder(
        itemBuilder: ...,
      ),
    ),
    // Your other widgets ...
  ],
)

使用 Column + ListView:

如果您的第一个 ListView 没有太多（或太大）children，请将其替换为 Column。

Column(
  children: [
    // Your other widgets ...
    Expanded( //              <-- Use Expanded
      child: ListView.builder(
        itemBuilder: ...,
      ),
    ),
  ],
)

Flutter - Listview.builder 在另一个列表视图中

Flutter - Listview.builder inside another Listview

android

android-listview