flutter布局技巧

（仅作备忘）

使用AspectRatio设置固定比例的控件

// 设置显示比例
body: Column(
    childern: <Widget>[
        Container(
            height: 150,
            child: AspectRatio(
                width: double.infinity,// 设置宽度
                aspectRatio: 16/9,
                child :Container()
            )
        )
    ]
)

 

层叠布局

1）

// 层叠布局实现相对定位，test在底部
Widget build(BuildContext context){
    return Center(
        child: Stack(
            alignment: Alignment(0,1),
            children:<Widget>[
                Container(
                    height:400,
                    width:300,
                    color: Colors.red,
                ),
                Text('test')
            ]
        )
    )
}

2）

// stack + align
child: Container(
    height:400,
    width: 300,
    child: Stack(
        children:<Widget>[
            Align(
                alignment: Alignment.center,
            ),
            Align(
                alignment: Alignment.topleft,
            ),
            Align(
                alignment:Alignment.bottom,
            )
        ]
    )
)

 

卡片布局

Widget build(BuildContext context){
    return ListView(
            children:<Widget>[
                Card(
                    margin:EdgeInsets.all(10),
                    child: Column(
                        children:<Widget>[

                        ]
                    )
                ),
                Card(
                    margin:EdgeInsets.all(10),
                    child: Column(
                        children:<Widget>[

                        ]
                    )
                )
            ]
        ]
    )
}

 

获取屏幕宽高

   // 获取屏幕宽高
    MediaQueryData mediaQuery = MediaQueryData.fromWindow(ui.window);
    var w=mediaQuery.size.width;//屏幕宽度
    var h=mediaQuery.size.height;//屏幕高度
    var scale =mediaQuery.devicePixelRatio;//每一个逻辑像素包含多少个原始像素
    var statusBar=mediaQuery.padding.top;//状态栏高度