Flutter - 另一個 Listview 中的 Listview.builder

Question

我希望我的屏幕是可滾動的，所以我把所有東西都放在一個 Listview 中。

現在我想在里面顯示另一個 Listview 來顯示列表的詳細信息。 當我嘗試此操作時會拋出錯誤 - “擴展的小部件必須放置在 Flex 小部件內。”

Answer 1

在listView.builder添加shrinkWrap: true並刪除最頂部的Container或將其替換為Column 。

Answer 2

在shrinkWrap: true, physics: ScrollPhysics(),添加shrinkWrap: true, physics: ScrollPhysics(), ，在這種情況下listview.builder 需要一個擴展的父級。 physics: ScrollPhysics()將允許它保持其狀態而無需滾動回第一項。 此外，如果您不希望用戶滾動 listview.builder，您可以使用physics: NeverScrollableScrollPhysics() 。

Answer 3

我希望我的屏幕是可滾動的，所以我把所有東西都放在一個 Listview 中。

我認為你應該使用帶有條子的CustomScrollView 。

如果您是第一次聽說裂片妖，或者它們看起來有點嚇人，我建議您閱讀 Emily Fortuna 撰寫的這篇優秀 文章。

在你的情況下，我會做這樣的事情：

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 4

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

層次結構是ListView > StreamBuilder > RefreshIndicator > ListView.builder 。

Answer 5

當我使用兩個ListViews 時，我遇到了這個問題，一個在另一個里面。 除了這個解決方法外，沒有什么對我有用。

在嵌套的 Listview 中，用 ConstrainedBox 覆蓋它並給它一些大的高度。 並使用 'shrinkWrap: true' 兩個 ListView。 由於收縮包裝會修剪額外的空間，因此額外的高度不會成為問題。

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 6

我能夠通過將主列包裝在 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 7

你可以這樣使用

 ListView(
     shrinkWrap: true,
     children: <Widget>[
          Text('hi'),//first widget
          Text('hi2'),//second widget
          Flex(
              direction: Axis.horizontal,children: <Widget>[
                      Expanded(
                        child: ListView.builder(
                            shrinkWrap: true,
                            itemCount: 3,
                            itemBuilder: (BuildContext context, int index){
                              return ...

Answer 8

這實際上取決於您的布局。 可能的情況可能是：

• 使用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沒有太多（或太大）的孩子，請將其替換為Column 。

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