如何让 SingleScrollView 在容器旁边

Question

绿色容器应该是静态小部件，红色容器是带有 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 中的第一行，它可以正常工作，但有了它，我总是会遇到溢出错误。知道如何解决吗？

Answer 1

将您的可滚动小部件包装在展开的内容中。下面是你的例子（没有 futurebuilder 因为我没有你的 future 功能等，但你可以很好地实现它。（由于性能原因，我用列表视图更改了 Scrollable 和 row :)

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,
                )
              ]),
            ]),
          )
        ]))

这应该有效，因为扩展告诉可滚动的内容可能有多少 space，所以可滚动的内容实际上可以滚动，否则它认为它有无限的 space（但它没有需要滚动内容）

现在您的代码应该是这样的：

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();
            }
          },
        ),

Answer 2

您快完成了，但您需要 space 这就是为什么您可以使用 Expanded 小部件来扩展 Row、Column 或 Flex 的子项，以便子项填充可用的space.

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();
            }
          },
        ),

更多关于Expanded

如何让 SingleScrollView 在容器旁边

How To have an SingleScrollView have next to a Container

dart

flutter

singlechildscrollview

flutter-futurebuilder