Flutter 中心小部件作为父部件的行为如何?
默认情况下,中心小部件将其子部件置于自身中心。但在我的情况下,它不起作用。Flutter 中心小部件作为父部件的行为如何?,flutter,Flutter,默认情况下,中心小部件将其子部件置于自身中心。但在我的情况下,它不起作用。我想将包含多行的列置于中心,因此我们将列置于中心小部件中。 中心小部件应将列作为子项并将其居中。但其行为出乎意料 这是我的密码 child: Column( children: <Widget>[ Row( children: <Widget>[ //This
我想将包含多行的列置于中心,因此我们将列置于中心小部件中。
中心小部件应将列作为子项并将其居中。但其行为出乎意料 这是我的密码
child: Column(
children: <Widget>[
Row(
children: <Widget>[
//This is widget 1
Expanded(
child: Text(
"Spice Jet",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
//This is widget 2
Expanded(
child: Text(
"From Mubabi to Banglore via New dehli",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
],
),
Row(
children: <Widget>[
//This is widget 1
Expanded(
child: Text(
"Air India",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 35.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
//This is widget 2
Expanded(
child: Text(
"From Jaipur to Goa",
textDirection: TextDirection.ltr,
style: TextStyle(
decoration: TextDecoration.none,
fontFamily: 'Raleway',
fontSize: 20.0,
color: Colors.white,
fontWeight: FontWeight.w700,
),
),
),
],
),
],
),
),
);
}
}
子:列(
儿童:[
划船(
儿童:[
//这是小部件1
扩大(
子:文本(
“香料喷射机”,
textDirection:textDirection.ltr,
样式:TextStyle(
装饰:textEdition.none,
fontFamily:“Raleway”,
字体大小:35.0,
颜色:颜色,白色,
fontWeight:fontWeight.w700,
),
),
),
//这是小工具2
扩大(
子:文本(
“通过新德里从穆巴比到班格罗”,
textDirection:textDirection.ltr,
样式:TextStyle(
装饰:textEdition.none,
fontFamily:“Raleway”,
字体大小:20.0,
颜色:颜色,白色,
fontWeight:fontWeight.w700,
),
),
),
],
),
划船(
儿童:[
//这是小部件1
扩大(
子:文本(
“印度航空”,
textDirection:textDirection.ltr,
样式:TextStyle(
装饰:textEdition.none,
fontFamily:“Raleway”,
字体大小:35.0,
颜色:颜色,白色,
fontWeight:fontWeight.w700,
),
),
),
//这是小工具2
扩大(
子:文本(
“从斋浦尔到果阿”,
textDirection:textDirection.ltr,
样式:TextStyle(
装饰:textEdition.none,
fontFamily:“Raleway”,
字体大小:20.0,
颜色:颜色,白色,
fontWeight:fontWeight.w700,
),
),
),
],
),
],
),
),
);
}
}
尝试使用轴对齐 对于Row
mainAxisAlignment: MainAxisAlignment.center
对于专栏
crossAxisAlignment: CrossAxisAlignment.center
默认情况下,行具有与中心的crossAxisAlignment。但是当你把它包装成一列, 它不显示在中间,因为它具有默认的crossAxisAlignment作为开始,而不是中心。您必须手动添加此行:
crossAxisAlignment: CrossAxisAlignment.center
您的代码应该如下所示:
....
color: Colors.deepPurple,
child: Column(
crossAxisAlignment: CrossAxisAlignment.center
children: <Widget>[
Row(
children: <Widget>[....
。。。。
颜色:颜色。深紫色,
子:列(
crossAxisAlignment:crossAxisAlignment.center
儿童:[
划船(
儿童:[。。。。
希望有帮助!快乐编码:)