如何在容器旁邊有一個SingleScrollView

綠色容器應該是靜態小部件，紅色容器是帶有 singleChildScrollView 的 FutureBuilder

這是我的代碼：

FutureBuilder(
          future: getMoodData(),
          builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot) {
            if (snapshot.hasData) {
              return Row(children: [
                Container(height: 150, width: 100, color: Colors.green),
                SizedBox(
                  width: 20,
                ),
                SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: snapshot.data!
                          .map((e) => Row(children: [
                                Container(
                                  height: 150,
                                  child: Text(e.text),
                                  width: 100,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ]))
                          .toList(),
                    ))
              ]);
            } else {
              return Container();
            }
          },
        ),

如果沒有 FutureBuilder 中的第一行，它可以正常作業，但是有了它，我總是會遇到溢位錯誤。知道如何解決嗎？

uj5u.com熱心網友回復：

將您的可滾動小部件包裝在擴展中。下面是您的示例（沒有futurebuilder，因為我沒有您的未來功能等，但您可以很好地實作它。（由于性能，我用串列視圖更改了可滾動和行：）

Scaffold(
            body: Row(children: [
          Container(height: 150, width: 100, color: Colors.green),
          SizedBox(
            width: 20,
          ),
          Expanded(
            child: ListView(scrollDirection: Axis.horizontal, children: [
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
              Row(children: [
                Container(
                  height: 150,
                  child: Text('test'),
                  width: 100,
                  color: Colors.red,
                ),
                SizedBox(
                  width: 20,
                )
              ]),
            ]),
          )
        ]))

這應該可以作業，因為擴展告訴可滾動它可能有多少空間，所以可滾動實際上可以滾動內容，否則它認為它有無限空間（并且它不需要滾動內容）

這就是您的代碼現在的樣子：

FutureBuilder(
          future: getMoodData(),
          builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot) {
            if (snapshot.hasData) {
              return Row(children: [
                Container(height: 150, width: 100, color: Colors.green),
                SizedBox(
                  width: 20,
                ),
                Expanded(
                    child: ListView(
                    scrollDirection: Axis.horizontal,
                    children: snapshot.data!
                          .map((e) => Row(children: [
                                Container(
                                  height: 150,
                                  child: Text(e.text),
                                  width: 100,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ]))
                          .toList(),
                    ))
              ]);
            } else {
              return Container();
            }
          },
        ),

uj5u.com熱心網友回復：

您快到了，但您需要空間，這就是為什么您可以使用Expanded擴展 Row、Column 或 Flex 的子項的小部件，以便子項填充可用空間。

FutureBuilder(
          future: getMoodData(),
          builder: (BuildContext context, AsyncSnapshot<List<Data>> snapshot) {
            if (snapshot.hasData) {
              return Row(children: [
                Container(height: 150, width: 100, color: Colors.green),
                SizedBox(
                  width: 20,
                ),
                Expanded( //wrap with expanded
                 child: SingleChildScrollView(
                    scrollDirection: Axis.horizontal,
                    child: Row(
                      children: snapshot.data!
                          .map((e) => Row(children: [
                                Container(
                                  height: 150,
                                  child: Text(e.text),
                                  width: 100,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 20,
                                )
                              ]))
                          .toList(),
                    )))
              ]);
            } else {
              return Container();
            }
          },
        ),

有關擴展的更多資訊

標籤：

上一篇：onPressed需要2次點擊完成嵌套功能

下一篇：用戶注冊后未創建FS檔案