Flutter - 如何使列屏幕可滚动

Question

我正在构建一个带有登录屏幕的 flutter 应用程序。 专注于文本字段时，屏幕溢出，我无法滚动。 我试过使用ListView.builder ，但这只是给出了一个 renderBox 错误，而常规的ListView不起作用

小部件结构是这样的

-scafold
   - body
     - container
       - column    
           - form
              - column
                  - textInput
                  - textInput
                  - container    
           - container
              - row      
           - raisedButton

先感谢您 ！！

Answer 1

ListView解决方案应该可以工作，但在撰写本文时，它遇到了此处列出的崩溃问题。 在没有崩溃的情况下实现相同目的的另一种方法是使用SingleChildScrollView ：

return new Container(
  child: new SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

Answer 2

试试这个代码：它使用 ListView

    class Home extends StatelessWidget {
  @override
     Widget build(BuildContext context) {
        // TODO: implement build
        return Scaffold(
          body: Center(
            child: ListView(
              shrinkWrap: true,
              padding: EdgeInsets.all(15.0),
              children: <Widget>[
                Center(
                  child: Card(
                    elevation: 8.0,
                    child: Container(
                      padding: EdgeInsets.all(10.0),
                      child: Column(
                        children: <Widget>[
                          TextField(
                            decoration: InputDecoration(
                              prefixIcon: Icon(Icons.person),
                              labelText: "Username or Email",
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          TextField(
                            decoration: InputDecoration(
                              prefixIcon: Icon(Icons.lock),
                              labelText: "Password",
                            ),
                          ),
                          SizedBox(
                            height: 15.0,
                          ),
                          Material(
                            borderRadius: BorderRadius.circular(30.0),
                            //elevation: 5.0,
                            child: MaterialButton(
                              onPressed: () => {},
                              minWidth: 150.0,
                              height: 50.0,
                              color: Color(0xFF179CDF),
                              child: Text(
                                "LOGIN",
                                style: TextStyle(
                                  fontSize: 16.0,
                                  color: Colors.white,
                                ),
                              ),
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  height: 25.0,
                ),
                Row(
                  children: <Widget>[
                    Expanded(child: Text("Don't Have a Account?")),
                    Text("Sign Up",
                        style: TextStyle(
                          color: Colors.blue,
                        )),
                  ],
                ),
              ],
            ),
          ),
          bottomNavigationBar: Padding(
            padding: EdgeInsets.all(10.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Expanded(
                    child: RaisedButton(
                      padding: EdgeInsets.all(15.0),
                      onPressed: () {},
                      color: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(
                            32.0,
                          ),
                          side: BorderSide(color: Color(0xFF179CDF))),
                      child: Text(
                        "SKIP SIGN UP FOR NOW",
                        style:
                        TextStyle(fontSize: 18.0, color: Color(0xFF179CDF)),
                      ),
                    )),
              ],
            ),
          ),
        );
      }
    }

Answer 3

有两种简单的方法可以做到这一点。

1. 将您的Column包装在SingleChildScrollView中

   SingleChildScrollView( child: Column( children: [ Text('First'), //... other children Text('Last'), ], ), )

2. 使用ListView而不是Column 。

    ListView( children: [ Text('First'), //... other children Text('Last'), ], )

   这种方法使用起来很简单，但是您失去了crossAxisAlignment等功能以及Column提供的其他好处，在这种情况下，您可以将子窗口小部件包装在Align中并设置对齐属性。

---

现在你可能有嵌套的孩子可以进一步滚动，在这种情况下，你需要为你的孩子提供一个固定的高度，你可以使用SizedBox ，就是这样。

例如：

ListView(
  children: [
    Text('First'),
    SizedBox(
      height: 100,
      child: ListView(...), // nested ScrollView
    ),
    Text('Last'),
  ],
)

Answer 4

我正在使用登录屏幕构建一个Flutter应用程序。 专注于文本字段，屏幕溢出，并且我无法滚动。 我已经尝试过使用ListView.builder ，但这只给出了renderBox错误，而常规的ListView不起作用

小部件的结构是这样的

-scafold
   - body
     - container
       - column    
           - form
              - column
                  - textInput
                  - textInput
                  - container    
           - container
              - row      
           - raisedButton

先感谢您 ！！

Answer 5

我们可以使用 Expanded 小部件。 它将添加滚动。

return new Expanded(
  child: new SingleChildScrollView(
    child: new Column(
      children: <Widget>[
        _showChild1(),
        _showChild2(),
        ...
        _showChildN()
      ]
    )
  )
);

Answer 6

将您的列包装在 SingleChildScrollView 中，然后将 SingleChildScrollView 包装在 Center 小部件中以使小部件在列中居中。

Center(
    child: SingleChildScrollView(
        child: Column(
        children: [
            Text('First'),
            //... other children
            Text('Last'),
        ],
    ),
)