列中的 Flutter 多交叉轴对齐

Question

有没有办法让一列中的一些项目使用 crossaxisalignment.start 对齐，而其他项目使用 crossaxisalignment.center 对齐？

                  Column(
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                    // These text fields = crossaxisalignment.start
                      Text(
                        'Welcome',
                        textAlign: TextAlign.start,
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          color: Colors.white,
                          fontSize: 36,
                        ),
                      ),

                      Text(
                        'To my test app',
                        textAlign: TextAlign.start,
                        style: TextStyle(
                          color: Colors.white,
                        ),
                      ),
                      SizedBox(height: 40.0),

                       // Everything else crossaxisalignment.center

                      TextFormField(
                        style: TextStyle(color: Colors.white),
                        textInputAction: TextInputAction.next,
                        focusNode: nodeOne,
                        onSaved: (value) => _email = value,
                        keyboardType: TextInputType.emailAddress,
                        decoration: InputDecoration(
                          prefixIcon:
                              Image.asset('assets/images/icons/Username.png'),
                          enabledBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.grey),
                          ),
                          focusedBorder: UnderlineInputBorder(
                            borderSide: BorderSide(color: Colors.white),
                          ),
                          labelText: "Email Address",
                          labelStyle: TextStyle(
                              color: nodeOne.hasFocus
                                  ? Colors.white
                                  : Colors.grey),
                        ),
                      ),
                      TextFormField(
                          style: TextStyle(color: Colors.white),
                          textInputAction: TextInputAction.go,
                          focusNode: nodeTwo,
                          onSaved: (value) => _password = value,
                          obscureText: true,
                          decoration: InputDecoration(
                              prefixIcon: Image.asset(
                                  'assets/images/icons/PasswordLock.png'),
                              enabledBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.grey),
                              ),
                              focusedBorder: UnderlineInputBorder(
                                borderSide: BorderSide(color: Colors.white),
                              ),
                              labelStyle: TextStyle(
                                  color: nodeTwo.hasFocus
                                      ? Colors.white
                                      : Colors.grey),
                              labelText: "Password")),
                      SizedBox(height: 20.0),

                      FlatButton(
                        onPressed: () {},
                        child: Text('Forgotten password?',
                            textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.white)),
                      ),
                      ButtonTheme(
                        minWidth: MediaQuery.of(context).size.width,
                        height: 40,
                        child: RaisedButton(
                            textColor: prefix0.backgroundColor,
                            color: Colors.white,
                            child: Text("Login"),
                            onPressed: () {
                              _loginAction();
                            },
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(5.0))),
                      ),
                      FlatButton(
                        onPressed: () {},
                        child: Text('Not registered?',
                            textAlign: TextAlign.center,
                            style: TextStyle(color: Colors.white)),
                      ),
                      Divider(
                        indent: MediaQuery.of(context).size.width * 0.333333,
                        height: 5,
                        thickness: 3,
                        color: Colors.white,
                        endIndent: MediaQuery.of(context).size.width * 0.333333,
                      ),
                      SizedBox(height: 15),
                      ButtonTheme(
                        minWidth: MediaQuery.of(context).size.width,
                        height: 40,
                        child: RaisedButton(
                            textColor: prefix0.backgroundColor,
                            color: Colors.white,
                            child: Text("Register here"),
                            onPressed: () {
                              _loginAction();
                            },
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(5.0))),
                      ),
                      SizedBox(height: 20),

                    ],
                  ),

Answer 1

更好的方法是使用 ListView 并使其 children Align 并设置 alignment 属性。

ListView(
  children: <Widget>[
    Align(
      alignment: Alignment.centerLeft,
      child: LeftWidget1(), // widget at left
    ),
    Align(
      alignment: Alignment.center,
      child: CenterWidget1(), // widget at center
    ),
    Align(
      alignment: Alignment.centerRight,
      child: RightWidget1(), // widget at right
    ),
  ],
)