Question

我对扑扑非常陌生，尝试设计一个如图所示的登录屏幕，我专栏并逐一添加了所有小部件。但是来到底部我尝试使用mainAxisAlignment，crossAxisAlignment仍然没有运气，底部是屏幕上的登录按钮之后，即没有帐户？和创建帐户。我需要屏幕左下方的那些字段。请帮助实现该目标。

return MaterialApp(
  debugShowCheckedModeBanner: false,
  home: Scaffold(
      backgroundColor: Color.fromRGBO(150, 169, 62, 1),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Container(
            alignment: Alignment.topCenter,
            child: Container(
              child: Image.asset('assets/logo_400.png'),
              margin: const EdgeInsets.all(60.0),
              width: 150.0,
              height: 150.0,
            ),
          ),
          Text(
            'Log into your account',
            style: TextStyle(color: Colors.white, fontSize: 25),
          ),
          Container(
              margin: const EdgeInsets.all(40.0),
              child: Column(
                children: <Widget>[
                  TextFormField(
                    decoration: const InputDecoration(
                        icon: Icon(
                          Icons.phone,
                          color: Colors.white,
                        ),
                        hintText: '10 digit mobile number',
                        hintStyle: TextStyle(color: Colors.white)),
                  ),
                  SizedBox(height: 20,),
                  TextFormField(
                    decoration: const InputDecoration(
                        // enabledBorder: const OutlineInputBorder(
                        //   // width: 0.0 produces a thin "hairline" border
                        //   borderSide: const BorderSide(
                        //       color: Colors.white, width: 0.0),
                        // ),
                        // border: const OutlineInputBorder(),
                        suffixIcon: Icon(
                          Icons.remove_red_eye,
                          color: Colors.white,
                        ),
                        icon: Icon(
                          Icons.lock,
                          color: Colors.white,
                        ),
                        hintText: 'Password',
                        hintStyle: TextStyle(color: Colors.white)),
                  ),
                  SizedBox(
                    height: 5,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      FlatButton(
                        //color: Colors.blue,
                        textColor: Colors.white,
                        //disabledColor: Colors.grey,
                        //disabledTextColor: Colors.black,
                        padding: EdgeInsets.all(8.0),
                        splashColor: Colors.blueAccent,
                        onPressed: () {
                          /*...*/
                        },
                        child: Text(
                          "Forgot Password",
                          style: TextStyle(
                              fontSize: 15.0,
                              decoration: TextDecoration.underline),
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 25,
                  ),
                  Container(
                    margin: EdgeInsets.all(25.0),
                    child: ButtonTheme(
                      minWidth: 300.0,
                      height: 50.0,
                      buttonColor: Colors.white,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      child: RaisedButton(
                        //shape: StadiumBorder(),
                        onPressed: () {},
                        textColor: Colors.black,
                        padding: const EdgeInsets.all(0.0),
                        child: Text(
                          'Login',
                          style: TextStyle(fontSize: 20),
                        ),
                      ),
                    ),
                  ),
                  //Spacer(),
                  SizedBox(
                    height: 150,
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                      Column(
                        crossAxisAlignment: CrossAxisAlignment.end,
                        children: <Widget>[
                          Text(
                            "Don't have a account?",
                            style: TextStyle(
                                color: Colors.white, fontSize: 15),
                          ),
                          FlatButton(
                            //color: Colors.blue,
                            textColor: Colors.white,
                            //disabledColor: Colors.grey,
                            //disabledTextColor: Colors.black,
                            padding: EdgeInsets.all(8.0),
                            splashColor: Colors.blueAccent,
                            onPressed: () {
                              /*...*/
                            },
                            child: Text(
                              "Create Account",
                              style: TextStyle(
                                  fontSize: 20.0,
                                  decoration: TextDecoration.underline),
                            ),
                          )
                        ],
                      )
                    ],
                  )
                ],
              )),
        ],
      )),
);

Answer 1

没有帐户？和创建帐户。我需要在底部的那些字段移到屏幕上

只是改变

Row(mainAxisAlignment: MainAxisAlignment.end

到

Row(mainAxisAlignment: MainAxisAlignment.start

顺便说一句，您是否已横向测试此布局？您应该将整个表单包装在列表视图中，以免出现溢出警告。

Answer 2

我知道这是很久以前的事了。但也许它可以帮助同一地点的人。最好的解决方案是包装您的小部件 Expanded 和 Align 小部件如此：

Expanded(
            child: Align(
              alignment: Alignment.bottomLeft,
              child: ListTile(
                title: Text('Logout'),
                onTap: _logout,
              ),
            ),
          )

Answer 3

您可以将“列”包装在“行”小部件中，然后在列子项放置您的底部之后。

如何将列的最后一项带到底部

3 个答案: