有没有办法让一列中的一些项目使用 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),
],
),
最佳答案
更好的方法是使用 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
),
],
)
关于列中的 Flutter 多交叉轴对齐，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57936755/