Flutter中的布局问题

1.Flutter中的居下,居右

What is the equivalent of a RelativeLayout?
A RelativeLayout lays your widgets out relative to each other. In Flutter, there are a few ways to achieve the same result.

You can achieve the result of a RelativeLayout by using a combination of Column, Row, and Stack widgets. 
You can specify rules for the widgets constructors on how the children are laid out relative to the parent.

For a good example of building a RelativeLayout in Flutter, see Collin’s answer on StackOverflow.

StackOverflow

1.1 Expanded

Expanded在弹性盒（Row 和 Column）中可以占用所有的剩余空间

实现逻辑

在Column/Row 中使用 Expanded,而Expanded中的子Widget也不用完全填充它.如下代码new Text('Bottom Text1') 和 new Text('Bottom Text2')就位于Column底部.

实现代码

class Feed extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(
      children: <Widget>[
        new Expanded(
          child: new ListView(
            children: [
                .
                .
                new Text('List Text'),
            ],
          ),
        ),
        new Text('Bottom Text1')
        new Text('Bottom Text2')
      ],
    );
  }
}

1.2 Align

使用Align作为父Widget,使用如下

        Stack(
              alignment: Alignment.center,
              children: <Widget>[
                TextFormField(
                  decoration: new InputDecoration(hintText: "请输入验证码",),
                ),
                Align(
                  alignment: new FractionalOffset(1.0, 0),
                  child: Container(
                    padding: EdgeInsets.fromLTRB(
                        15, Dimens.marginWindow, 15, Dimens.marginWindow),
                    child: Text("获取验证码",),
                  ),
                )
              ],
            ),

//其实Center就是继承的Align
class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

2.Flutter中的填充父布局

详细跳转 天玉 的文章

方案一：minWidth: double.infinity,

方案二：设置在ButtonTheme中设置宽度

MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        buttonTheme: ButtonThemeData(minWidth: double.infinity, height: 50.0),
      ),
      home: SplashPage(),
    );

方案三：在Button之外再套一层控制大小

这种情况可直接使用FlatButton、RaisedButton、OutlineButton如下： Container 和 SizedBox 都可以

SizedBox(
  width: double.infinity,
  height: 50,
  child: RaisedButton(
    onPressed: () {},
    child: Text("宽度占满了"),
    color: Colors.green,
    textColor: Colors.white,
  ),
), 

3.Flutter中Widget大小

对于没有 width,height属性的Widget,有时候并不想使用默认的大小,这时候可以用SizedBox包装,通过设置SizedBox的width和height达到目的.

SizedBox(
          child: CircularProgressIndicator(
            strokeWidth: 5,
          ),
          width: 80,
          height: 80,
        )

4.Flutter中设置**Button不可点击

只需要在 onPressed 上面懂手脚就好

MaterialButton(
              padding: new EdgeInsets.fromLTRB(10.0, 10.0, 10.0, 10.0), 
              color: ColorDef.colorPrimary,
              textTheme: ButtonTextTheme.primary,
              child: new Text('进入'),
              elevation: 4.0,
              disabledColor: Colors.black12,
              onPressed: clickListener(),
            )
//在setState((){isLoading = true;/*isLoading = false;*/})即可改变点击状态
clickListener() {
    if (isLoading) {
      return null;
    } else {
      return () {
        _toLogin();
      };
    }
  }

5.Flutter中键盘顶起底部内容

Scaffold( 
	resizeToAvoidBottomPadding: false, //输入框抵住键盘 内容不随键盘滚动
);

6.Flutter中布局被状态栏遮挡

当我们的界面没有AppBar时,布局会被安排在手机状态栏下面去,解决这个问题只需要用 SafeArea 包裹就好

 @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: new Scaffold( 
        body: new Text("我是Container"), 
      ),
    );
  }

7.Flutter中布局使用变量一闪而过的报错

在使用定位的时候,在没有获取到定位信息时,[Location]为空,调用里面的任何方法都会报错

解决办法

主要是做好判空操作:1.使用中间变量(感觉累赘) 2.三目 防空