Flutter学习之旅 - 页面布局Padding、Column、Flex、Expanded

Padding

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Padding(
      padding: EdgeInsets.all(50),
      child: Text("你好"),
    );
  }
}

就是给上下左右来点边距,功能单一但是占用内存少

线性布局组件(Column和Row)

class _IconContainerWidget extends StatelessWidget {
  const _IconContainerWidget({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 100,
      width: 100,
      color: Colors.red,
      child: const Icon(
        Icons.home,
        color: Colors.white,
        size: 28,
      ),
    );
  }
}

自定义组件传参

class _IconContainerWidget extends StatelessWidget {
  Color color;
  IconData icon;
  _IconContainerWidget(this.icon, {Key? key, required this.color})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      height: 100,
      width: 100,
      color: color,
      child: Icon(
        icon,
        color: Colors.white,
        size: 28,
      ),
    );
  }
}

水平布局组件(Row)

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        _IconContainerWidget(
          Icons.home,
          color: Colors.red,
        ),
        _IconContainerWidget(
          Icons.settings,
          color: Color.fromRGBO(200, 200, 200, 1),
        )
      ],
    );
  }
}

垂直布局组件(Column)

写法是_IconContainerWidget(Icons.white,color:Colors.red)

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        _IconContainerWidget(
          Icons.home,
          color: Colors.red,
        ),
        _IconContainerWidget(
          Icons.settings,
          color: Color.fromRGBO(200, 200, 200, 1),
        )
      ],
    );
  }
}

弹性布局(Flex&Expanded)

Expanded组件必须放在Row(行)或Column(列)又或者Flex组件中

Expanded

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Row(
      children: [
        Expanded(
          flex: 1,
          child: _IconContainerWidget(
            Icons.home,
            color: Colors.red,
          ),//在这个Expanded组件中设置宽高是没有用的
        ),
        Expanded(
          flex: 2,
          child: _IconContainerWidget(
            Icons.settings,
            color: Color.fromRGBO(200, 200, 0, 1),
          ),
        )
      ],
    );
  }
}

Flex

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Flex(
      direction: Axis.horizontal, //Axis.horizontal:行;Axis.vertical:列
      children: [
        Expanded(
          flex: 1,
          child: _IconContainerWidget(
            Icons.home,
            color: Colors.red,
          ), //在这个Expanded组件中设置宽高是没有用的
        ),
        Expanded(
          flex: 2,
          child: _IconContainerWidget(
            Icons.search, //搜索
            color: Color.fromRGBO(200, 200, 0, 1),
          ),
        )
      ],
    );
  }
}

可以写行(Axis.horizontal)或者写列(Axis.vertical)

达到父元素的尺寸

double.infinity和double.maxFinite都能达到父元素的尺寸

Container(
      alignment: Alignment.center,
      height: double.infinity,
      width: double.infinity,
      ...
);