Flutter 学习笔记（四） 页面布局 Padding / Row / Column

Padding 组件

属性：

属性	说明
padding	padding 值, EdgeInsetss 设置填充的值
child	子组件

在需要的组件外进行添加，可以给最外层进行添加，也可以给每个小的item进行添加，也可以同时添加，下面两个小demo是分别给父容器添加和item添加也可以同时添加；

添加容器的padding-top和padding-left值，效果如下：

class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    List<Widget> list = [];

    for (var i = 0; i < 20; i++) {
      list.add(Container(
          child: Column(children: <Widget>[
            Image.asset("images/2.jpg"),
          ]),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.blue, width: 3.0)
          )
        )
      );
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return Padding(
        padding: EdgeInsets.fromLTRB(10, 20, 0, 0),
        child: GridView.count(crossAxisCount: 2, children: this._getData())
     );
  }
}

给 item 添加 padding-top 和 padding-left 值，效果如下：

//- 内容溢出在以后的学习过程中进行解决，后面进行解决

class HomeContent extends StatelessWidget {
  List<Widget> _getData() {
    List<Widget> list = [];

    for (var i = 0; i < 20; i++) {
      list.add(Container(
          child: Column(children: <Widget>[
            Padding(
                padding: EdgeInsets.fromLTRB(10, 20, 0, 0),
                child: Image.asset("images/2.jpg")),
          ]),
          decoration: BoxDecoration(
              border: Border.all(color: Colors.blue, width: 3.0))));
    }

    return list;
  }

  @override
  Widget build(BuildContext context) {
    return GridView.count(crossAxisCount: 2, children: this._getData());
  }
}

Row组件 水平布局组件

属性	说明
mainAxisAlignment	主轴的排序方式
crossAxisAlignment	次轴的排序方式
children	组件子元素

基础的水平排列定义

//- 基础的水平排列定义
import 'package:flutter/material.dart'; //- 库

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Hello Demo')),
        body: LayoutDemo(),
      ),
      theme: ThemeData(
        primarySwatch: Colors.green,
      ),
    );
  }
}

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Row(children: <Widget>[
      IconContainer(Icons.search, color: Colors.blue, size: 30.0),
      IconContainer(Icons.home, color: Colors.orange, size: 30.0),
      IconContainer(Icons.person, color: Colors.green, size: 30.0),
    ]);
  }
}

class IconContainer extends StatelessWidget {
  double? size = 32.0;
  Color? color = Colors.green;
  IconData icon;
  IconContainer(this.icon, {this.color, this.size});

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 100.0,
      width: 100.0,
      color: this.color,
      child:
          Center(child: Icon(this.icon, size: this.size, color: Colors.white)),
    );
  }
}

mainAxisAlignment 主轴的排序方式

如果有 container 就根据 父元素进行排列，如果没有父元素就根据屏幕进行排列； 下面的案例是根据 container 进行排列的

默认情况：不设置 MainAxisAlignment 和 CrossAxisAlignment ， 次轴居中，主轴居左

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300.0,
        height: 500.0,
        color: Colors.yellow,
        child: Row(children: <Widget>[
          IconContainer(Icons.search, color: Colors.blue, size: 30.0),
          IconContainer(Icons.home, color: Colors.orange, size: 30.0),
          IconContainer(Icons.person, color: Colors.green, size: 30.0),
        ]));
  }
}

主轴居中：MainAxisAlignment.center

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300.0,
        height: 500.0,
        color: Colors.yellow,
        child:
            Row(
            mainAxisAlignment: MainAxisAlignment.center, 
            children: <Widget>[
          IconContainer(Icons.search, color: Colors.blue, size: 30.0),
          IconContainer(Icons.home, color: Colors.orange, size: 30.0),
          IconContainer(Icons.person, color: Colors.green, size: 30.0),
        ]));
  }
}

主轴居尾：MainAxisAlignment.end

两边的距离是中间距离的1/2：MainAxisAlignment.spaceAround

两边无距离：MainAxisAlignment.spaceBetween

两边的距离是中间距离相同：MainAxisAlignment.spaceAround

crossAxisAlignment 次轴的排序方式

次轴居尾：CrossAxisAlignment.end

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300.0,
        height: 500.0,
        color: Colors.yellow,
        child:
            Row(
            crossAxisAlignment: CrossAxisAlignment.end, 
            children: <Widget>[
                  IconContainer(Icons.search, color: Colors.blue, size: 30.0),
                  IconContainer(Icons.home, color: Colors.orange, size: 30.0),
                  IconContainer(Icons.person, color: Colors.green, size: 30.0),
        ]));
  }
}

次轴在开始的位置：CrossAxisAlignment.start

次轴高度自适应：CrossAxisAlignment.stretch

Column 垂直布局组件

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        width: 300.0,
        height: 500.0,
        color: Colors.yellow,
        child: Column(children: <Widget>[
          IconContainer(Icons.search, color: Colors.blue, size: 30.0),
          IconContainer(Icons.home, color: Colors.orange, size: 30.0),
          IconContainer(Icons.person, color: Colors.green, size: 30.0),
        ]));
  }
}

属性：Column 布局组件属性 与 Row 组件属性一致，可以自己去尝试，在这里就不给案例展示了； | 属性 | 说明 | | --- | --- | | mainAxisAlignment | 主轴的排序方式 | | crossAxisAlignment | 次轴的排序方式 | | children | 组件子元素 |