底部溢出使用 SingleChildScrollView

Question

@override
Widget build(BuildContext context) {
return Scaffold(
  backgroundColor: Color(0xff003859),
  appBar: AppBar(
    title: Text(
      "Conversor de moedas 360",
      style: TextStyle(
        color: Color(0xff003859)
      )
    ),
    backgroundColor: Color(0xffffa300),
  ),
  body: FutureBuilder<Map>(
    future: getData(),
    builder: (context, snapshot) {
      switch(snapshot.connectionState){
        case ConnectionState.none:
        case ConnectionState.waiting:
        return Center(
          child: Text(
            "Carregando Dados...",
            style: TextStyle(
              color: Color(0xffffa300),
              fontSize: 25.0
            ),
            textAlign: TextAlign.center,
          )
        );
        default:
        if (snapshot.hasError){
          return Center(
              child: Text(
                "Erro ao carregar dados...",
                style: TextStyle(
                    color: Color(0xffffa300),
                    fontSize: 25.0
                ),
                textAlign: TextAlign.center,
              )
          );  
        } else {
          dolar = snapshot.data["results"]["currencies"]["USD"]["buy"];
          euro = snapshot.data["results"]["currencies"]["EUR"]["buy"];
          return Column(
            children: <Widget>[
              Image.asset(
              "images/360Tecnologia.jpg",
                fit: BoxFit.fitWidth,
              ),
              SingleChildScrollView(
                padding: EdgeInsets.all(10.0),
                child: Column(
                  children: <Widget>[
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Reais",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "R\$ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Dólares",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "U\$ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Euros",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "€ "
                      ),
                      style: TextStyle(
                      color: Color(0xffffa300),
                      fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Libra",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "£\$ "
                      ),
                      style: TextStyle(
                        color: Color(0xffffa300),
                        fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                      decoration: InputDecoration(
                        labelText: "Bitcoin",
                        labelStyle: TextStyle(
                          color: Color(0xffffa300),
                        ),
                        border: OutlineInputBorder(),
                        prefixText: "BTC "
                      ),
                      style: TextStyle(
                        color: Color(0xffffa300),
                        fontSize: 25.0
                      )
                    ),
                    Divider(),
                    TextField(
                        decoration: InputDecoration(
                            labelText: "Bitcoin",
                            labelStyle: TextStyle(
                              color: Color(0xffffa300),
                            ),
                            border: OutlineInputBorder(),
                            prefixText: "BTC "
                        ),
                        style: TextStyle(
                            color: Color(0xffffa300),
                            fontSize: 25.0
                        )
                    ),
                  ],
                )
              )
            ],
          );
        }
      }
    }
  )
);
}
}

我想在顶部栏下方的顶部显示图像。图像是固定的。

在顶部栏下方，我在 SingleChildScrollView 小部件中有任何文本字段，但是当我尝试滚动元素时这不起作用。

当我向上或向下滚动屏幕时，文本字段无法滚动。

堆栈溢出希望我输入更多文本，因为我放了很多代码，但我的疑问在文本上得到了解释......

有什么帮助吗？

Answer 1

要解决 singleChildScrollView 问题，您可以将其包装在可扩展小部件中，这将解决该问题。但是，如果您希望图像位于顶部并固定在应用程序栏中，您可能需要考虑使用SliverList来完成您正在执行的操作。

Answer 2

Column(
   children: <Widget>[

替换为：

Stack(
    children: <Widget>[

您看到该错误是因为您SingleChildScrollView在Column.

另一种解决方案是Column用SingleChildScrollView而不是第二个包装您的父级。但这也会滚动您的图像。

或者，如果您的图片是固定图片，您可以将其添加到AppBar bottom：

  AppBar(
    //...
    bottom: PreferredSize(
      preferredSize: Size.fromHeight(129.0),
      child: Image.asset(
        "images/360Tecnologia.jpg",
        fit: BoxFit.fitWidth,
      ),
    ),
  ),

当然，在这种情况下，如果您的snapshot.hasError或当连接正在等待时，您将看到此图像（您可以有一个条件，例如isDataAvailable并true在连接状态完成时创建并检查它bottom）。

另一种方法是Column用另一个包裹父级，SingleChildScrollView但这会产生两个滚动视图。所以为了避免图像（外部滚动视图）不滚动添加scrollPysics: NeverScrollPhysics()（但我不建议使用额外的小部件进行不必要的包装）。