在Flutter中，沒有固定高度的嵌套listview有溢位和不可滾動

在我的專案中，我實作了一個問卷格式頁面。

一份問卷有很多部分（1,2,3 ...），每個部分都有很多問題。

而且，這些問題有很多選擇（非常差、差、一般、好、非常好等）。

為了實作這個頁面，我選擇了一個嵌套的串列視圖（在串列視圖中，存在另一個串列視圖）。

這是一個與我的具有相同小部件樹的示例代碼。

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const Text('this is text inside 1st column. blue container'),
          Column(
            children: [
              const Text('this is text inside 2nd column. about part title'),
              ListView.separated(
                shrinkWrap: true,
                itemBuilder: (BuildContext firstListViewContext,
                    int firstListViewIndex) {
                  return Column(
                    children: [
                      const Text(
                          'this is text inside 1st listview and 3nd column. question title'),
                      ListView.separated(
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index) {
                          return Text(
                              'this is text inside 2nd listview and 3nd column, question selector list');
                        },
                        separatorBuilder: (BuildContext context, int index) =>
                            const SizedBox(height: 4),
                        itemCount: 20,
                      ),
                    ],
                  );
                },
                separatorBuilder: (BuildContext context, int index) =>
                    const SizedBox(height: 4),
                itemCount: 1,
              ),
            ],
          ),
          Spacer(),
          ElevatedButton(
              onPressed: () {},
              child: Text('this is button inside 1st column.')),
        ],
      ),
    );
  }
}

上面的代碼有溢位問題，問題listview不能滾動...

有什么辦法可以擺脫上面代碼中的溢位并向下滾動問題串列？

編輯 1。

在我的代碼中，只有問題的串列視圖應該是可滾動的。

該按鈕應附加到螢屏的底部。

uj5u.com熱心網友回復：

嘗試這個：

Column(
        mainAxisSize: MainAxisSize.min,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          const Text('this is text inside 1st column. blue container'),
          Expanded(
            child: Column(
              children: [
                const Text('this is text inside 2nd column. about part title'),
                Expanded(
                  child: ListView.separated(
                    itemBuilder: (BuildContext firstListViewContext,
                        int firstListViewIndex) {
                      return Column(
                        children: [
                          const Text(
                              'this is text inside 1st listview and 3nd column. question title'),
                          ListView.separated(
                            physics: NeverScrollableScrollPhysics(),// <---- update: add this
                            shrinkWrap: true,
                            itemBuilder: (BuildContext context, int index) {
                              return Text(
                                  'this is text inside 2nd listview and 3nd column, question selector list');
                            },
                            separatorBuilder:
                                (BuildContext context, int index) =>
                                    const SizedBox(height: 4),
                            itemCount: 20,
                          ),
                        ],
                      );
                    },
                    separatorBuilder: (BuildContext context, int index) =>
                        const SizedBox(height: 4),
                    itemCount: 1,
                  ),
                ),
              ],
            ),
          ),
          Spacer(),
          ElevatedButton(
              onPressed: () {},
              child: Text('this is button inside 1st column.')),
        ],
      )

標籤：扑 列表显示 颤振布局 嵌套列表

上一篇：在顫動中單擊浮動操作按鈕時將新用戶添加到串列視圖中

下一篇：在Delphi11VCL中與CopyRect斗爭