Flutter-使用串列視圖生成器在列內制作可滾動的子項

我正在構建一個計算器應用程式，在其中我想要一個可滾動的子項用于之前的計算，但是因為我已經使用 Column 來列出不同的小部件，所以它向我顯示了 hassize 型別的錯誤。

下面是設計部分的影像，其中選擇了我想要滾動的區域

這是我為視圖（頁面）撰寫的代碼

SafeArea(
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.end,
      children: [
        ThemeSwitcher(height: height),
        Padding(
          padding: EdgeInsets.only(top: height * 0.15, right: width * 0.03),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
// From here I want the Widget to be Scollable based on the List declared before
              Container(
                child: SingleChildScrollView(
                  child: Column(children: [
                    ListView.builder(
                      itemBuilder: (context, index) => Text(
                        textEval[index],
                        style: TextStyle(
                          fontSize: (width * 0.045),
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    )
                  ]),
                ),
              ),
// The Elements between these two comments I want to be in a scrollable child view
              Text(
                textEval[textEval.length - 2],
                style: TextStyle(
                  fontSize: (width * 0.045),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
              Text(
                mainText,
                style: TextStyle(
                  fontSize: (width * 0.08),
                  fontWeight: FontWeight.w500,
                  height: 2,
                ),
              ),
            ],
          ),
        )
      ],
    ),
  ),

誰能告訴我如何實作這一目標？

uj5u.com熱心網友回復：

用 SingleChildScrollView() 包裹列。

uj5u.com熱心網友回復：

這是 Flutter 中的常見模式。您可能已經嘗試過

Column(
    children: [
        ...,
        SingleChildScrollView(
            child: Column()   // 2nd column
        )
    ]
)

它不起作用，因為 SingleChildScrollView 可以采用無限高，而 Column 可以允許無限高。

解決這個問題的最簡單方法是使用 Expanded 小部件包裝 SingleChildScrollVIew

Column(
    children: [
        ...,
        Expanded(
             child: SingleChildScrollView(
                   child: Column()   // 2nd column
             )
        )
    ]
)

這將使 SingleChildScrollView 采用 Column 中的剩余高度。但是，如果您希望它是特定值的高度，則將 Expanded 替換為指定高度的 Sizedbox。

uj5u.com熱心網友回復：

您可以通過洗掉額外的小部件（如Column.

換行SingleChildScrollView以Expanded獲得可滾動的孩子的可用空間。

雖然SingleChildScrollView已經處理滾動事件ListView.builder滾動事件將重疊并導致問題。您可以使用shrinkWrap: true, primary: false,或physics: const NeverScrollableScrollPhysics(),shrinkWrap: true,來解決此問題。

演示片段

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.end,
          mainAxisSize: MainAxisSize.min,
          children: [
            // From here I want the Widget to be Scollable based on the List declared before
            Expanded(
              child: SingleChildScrollView(
                child: Column(
                  // mainAxisSize: MainAxisSize.min,
                  children: [
                    ListView.builder(
                      itemCount: 53,
                      shrinkWrap: true,
                      primary: false,
                      // physics: const NeverScrollableScrollPhysics(),
                      itemBuilder: (context, index) => Text(
                        "    textEval[index] $index",
                        style: const TextStyle(
                          fontWeight: FontWeight.w500,
                          height: 2,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
            ),
            // The Elements between these two comments I want to be in a scrollable child view
            const Text(
              "textEval[textEval.length - 2]",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
            const Text(
              "mainText",
              style: TextStyle(
                fontWeight: FontWeight.w500,
                height: 2,
              ),
            ),
          ],
        ),
      ),
    );
  }

標籤：

上一篇：為什么點擊后BottomNavigationBarItem的標簽沒有變化？

下一篇：在Flutter中更改串列內的文本樣式