Flutter - 我可以讓 SingleChildScrollView 填充可用空間嗎？

Question

我有一個正在為 Android 構建的 Flutter 應用程序。 結構大致如下：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: SingleChildScrollView(
        child: Container(
          decoration: const BoxDecoration(
            gradient: ...
          ),
          child: ...
        ),
      )
    );
  }

這里的目標是讓漸變背景填充應用欄下方的所有屏幕，如果內容大於該空間，則使其可滾動。

如果我省略SingleChildScrollView ，則Container會填充空間。 但當然，如果它溢出，則沒有滾動。 使用上面的代碼，滾動視圖在小屏幕上完成它的工作，但在大屏幕上，漸變背景不會填滿整個可用區域。

如果我像這樣改變它：

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("")),
      body: Container(
        decoration: const BoxDecoration(
          gradient: ...
        ),
        child: Column(children: [
          SingleChildScrollView(
            child: ...
          ),
          Expanded(child:Container())
        ]),
      )
    );
  }

然后漸變填充背景但滾動視圖沒有做正確的事情 - 內容溢出屏幕但無法滾動。 我怎樣才能做到這兩點？

Answer 1

您遇到此問題的原因是您的容器位於SingleChildScrollView小部件內，並且正在沿着SingleChildScrollView小部件滾動。 並且刪除SingleChildScrollView會導致renderflex 溢出錯誤

Expanded關鍵字將引發incorrect use of ParentDataWidget

此外，您已經在列中添加了 SingleChildScrollView 小部件，您必須很好地交換這些小部件

這是我給出的一個示例，它將幫助您實現它。

  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
    // Add The Container gradient here
      width: double.infinity,
      height: MediaQuery.of(context).size.height,
      child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                height: 100,
                width: 50,
                color: Colors.red,
              ),
              Container(
                height: 100,
                width: 50,
                color: Colors.blue,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.yellow,
              ),
              Container(
                height: 1000,
                width: 50,
                color: Colors.orange,
              ),
            ],
          )),
    ));
  }