入门flutter遇到的坑(篇一)

Flex的坑:
文字换行导致其他Widget被挤下去了???
文字不换行前是这样的。如图:


image.png

文字和按钮基本对齐了。
文字换行是这样的。如图:


image.png

从图中很明显看出按钮被挤下来了。
怎么回事?我的代码是这样写的。
       new Flex(
                                children: [
                                  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布局默认是垂直居中的,仔细看也可以发现当文字换行时,按钮垂直居中了。
解决后的效果如图所示:


image.png

你可能感兴趣的:(入门flutter遇到的坑(篇一))