您现在的位置是：首页 > 前端 > 后端 > Flutter Flutter

flutter-07(页面布局 Paddiing Row Column Expanded 组件详解)

2020-04-30【Flutter】886人已围观

简介## 一、Flutter Paddiing 组件在 `html` 中常见的布局标签都有 `padding` 属性，但是 `Flutter` 中很多 `Widget` 是没有 `padding` 属性。这个时候我们可以用 `Padding` 组件处理容器与子元素直接的间距。属性 | 说明 ---|--- padding | padding 值, EdgeInsetss 设置填充的值 child | 子组件 ![image](http://image.apidata.

## 一、Flutter Paddiing  组件

在 `html` 中常见的布局标签都有 `padding` 属性，但是 `Flutter` 中很多 `Widget` 是没有 `padding` 属
性。这个时候我们可以用 `Padding` 组件处理容器与子元素直接的间距。

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302201510.png)

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.fromLTRB(0, 0, 10, 0),
      child: GridView.count(
        crossAxisCount: 2,
        childAspectRatio: 1.5,
        children: <Widget>[
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/1.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/2.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/3.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/4.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/5.png',
                fit: BoxFit.cover),
          ),
          Padding(
            padding: EdgeInsets.fromLTRB(10, 10, 0, 0),
            child: Image.network('https://www.itying.com/images/flutter/6.png',
                fit: BoxFit.cover),
          ),
        ],
      ),
    );
  }
}
```

## 二、 Flutter Row  水平布局组件

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302201923.png)

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 700,
      width: 500,
      color: Colors.black26,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  IconData icon;
  Color color;
  IconContainer(this.icon, {this.size, this.color = Colors.blue}) {
    this.size = 32.0;
  }
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Container(
        width: this.size + 60,
        height: this.size + 60,
        color: this.color,
        child: Center(
            child: Icon(this.icon, color: Colors.white, size: this.size)));
  }
}
```

## 三、 Flutter Column  垂直布局组件

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

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302204900.png)

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 700,
      width: 500,
      color: Colors.black26,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
// crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          IconContainer(Icons.home, color: Colors.red),
          IconContainer(Icons.search, color: Colors.blue),
          IconContainer(Icons.send, color: Colors.orange),
        ],
      ),
    );
  }
}

```

## 四、 Flutter Expanded  类似 Web  中的 Flex 布局

`Expanded` 可以用在 `Row` 和 `Column` 布局中

属性 | 说明
---|---|---
flex | 元素站整个父 Row /Column 的比例
child | 子元素

![image](http://image.apidata.vip/QQ%E6%88%AA%E5%9B%BE20200302205535.png)

```
class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: EdgeInsets.all(10),
      child: Row(
// crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment
            .center, // crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Expanded(flex: 2, child: IconContainer(Icons.home)),
          SizedBox(width: 10),
          Expanded(flex: 3, child: IconContainer(Icons.search)),
// SizedBox(width: 10),
// Expanded(child: IconContainer(Icons.send))
        ],
      ),
    );
  }
}

class IconContainer extends StatelessWidget {
  double size;
  IconData icon;
  IconContainer(this.icon, {this.size}) {
    this.size = 32.0;
  }
  @override
  Widget build(BuildContext context) {
// TODO: implement build
    return Container(
        width: 100.0,
        height: 100.0,
        color: Colors.blue,
        child: Center(
            child: Icon(this.icon, color: Colors.white, size: this.size)));
  }
}
```

关注博客，更多精彩分享，敬请期待！

Tags：

很赞哦！ (0)

上一篇：flutter-06 ListView 基础列表组件、水平列表组件、图标组件

下一篇：flutter-08(页面布局 Stack 层叠组件 Stack 与与 Align Stack 与与 Positioned 现定位布局)