Flex的坑:
文字换行导致其他Widget被挤下去了???
文字不换行前是这样的。如图:
文字和按钮基本对齐了。
文字换行是这样的。如图:
从图中很明显看出按钮被挤下来了。
怎么回事?我的代码是这样写的。
new Flex(
children: <Widget>[
new Expanded(
child: Container(
child:
new Text("欢迎大家来到深度讲解G0语言的课堂语言的课堂语言的课堂"),
padding: EdgeInsets.only(bottom: 10.0),
),
),
new Container(
child: new RaisedButton(
onPressed: () {},
child: new Text(
"已解决",
style: new TextStyle(
fontSize: 10.0,
color: Color.fromRGBO(128, 128, 128, 1),
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.all(
Radius.circular(25))),
color: Color.fromRGBO(245, 245, 245, 1),
elevation: 0,
),
width: 66.0,
height: 24.0,
margin: EdgeInsets.only(left: 10.0),
// alignment: Alignment.center,
)
],
direction: Axis.horizontal,
//
),
解决方案:加个
crossAxisAlignment: CrossAxisAlignment.start,
原来是因为Flex布局默认是垂直居中的,仔细看也可以发现当文字换行时,按钮垂直居中了。
解决后的效果如图所示: