flutter 常用布局方式

文章目录

  • 一、单子 Widget 嵌套布局:
    • 1、Container
      • a、padding
      • b、margin
    • 2、Padding
    • 3、Center
  • 二、多子 Widget 布局:
    • 1、Row与Column
    • 2、Row与Column 结合Expanded使用
    • 3、Row与Column 子视图排列方式
      • a、mainAxisAlignment与crossAxisAlignment
      • b、mainAxisSize
    • 4、层叠 Widget 布局:Stack 与 Positioned

一、单子 Widget 嵌套布局:

单子 Widget是指只有一个子组件的Widget,这样布局Widget有三个:Container、Padding、Center


1、Container

Container,是一种允许在其内部添加其他控件的控件,也是 UI 框架中的一个常见概念。
在 Flutter 中,Container 本身可以单独作为控件存在(比如单独设置背景色、宽高),也可以作为其他控件的父级存在:Container 可以定义布局过程中子 Widget 如何摆放,以及如何展示。与其他框架不同的是,Flutter 的 Container 仅能包含一个子 Widget。

先简单写一个Container,尺寸200x200;在内部居左上放一个子Container,尺寸80x80

  • 代码如下:
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // Here we take the value from the MyHomePage object that was created by
        // the App.build method, and use it to set our appbar title.
        title: Text(widget.title),
      ),
      body: _container(), // This trailing comma makes auto-formatting nicer for build methods.
    );
  }

 Container _container(){
    return Container(
      width: 200,
      height: 200,
      color: Colors.yellow,
      alignment: Alignment.topLeft,
      child: Container(
  

你可能感兴趣的:(flutter,javascript,前端)