flutter布局(二) - Padding、Align、Center

前言

本文主要讲解flutter的布局的Padding、Align、Center的基本使用和一些基础属性.

Padding 官方解释:
A widget that insets its child by the given padding.

Align 官方解释:
A widget that aligns its child within itself and optionally sizes itself based on the child’s size.

Center 官方解释:
A widget that centers its child within itself.

1.Padding属性

下面列举了Padding的属性

const Padding({
    Key key,
    @required this.padding,
    Widget child,
  })

属性说明：

key

Padding唯一标识符，用于查找更新。

child

container中的内容widget。

官方代码示例

Padding(
  padding: EdgeInsets.all(8.0),
  child: const Card(child: Text('Hello World!')),
)

代码效果

我自己添加了一些效果提供大家参考

完整代码

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Padding'),
        ),
        // Column组件忽略,重点是里面的
        body: Column(
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Padding(
                // EdgeInsets的构造方法有很多,大家可以慢慢尝试
                padding: EdgeInsets.all(18.0),
                child: const Card(child: Text('Hello World!')),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Padding(
                // EdgeInsets的构造方法有很多,大家可以慢慢尝试
                padding: EdgeInsets.fromLTRB(10, 20, 30, 40),
                child: const Card(child: Text('Hello World!')),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Padding(
                // EdgeInsets的构造方法有很多,大家可以慢慢尝试
                padding: EdgeInsets.only(top: 30),
                child: const Card(child: Text('Hello World!')),
              ),
            ),
          ],
        ));
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}

2. Align属性

下面列举了Align的属性

const Align({
    Key key,
    this.alignment = Alignment.center,
    this.widthFactor,
    this.heightFactor,
    Widget child
  })

属性说明：

key

Padding唯一标识符，用于查找更新。

child

container中的内容widget。

widthFactor

宽度因子，如果设置的话，Align的宽度就是child的宽度乘以这个值，不能为负数。

heightFactor

高度因子，如果设置的话，Align的高度就是child的高度乘以这个值，不能为负数。

官方代码示例

Center(
  child: Container(
    height: 100.0,
    width: 100.0,
    color: Colors.yellow,
    child: Align(
      alignment: FractionalOffset(0.2, 0.6),
      child: Container(
        height: 40.0,
        width: 40.0,
        color: Colors.red,
      ),
    ),
  ),
)

代码效果

我自己添加了一些效果提供大家参考

**Align的alignment的使用

alignment: Alignment.topRight等价于下面的

alignment: FractionalOffset(0, 0),范围是0~1,分别对应Alignment.XX的方式,也可以根据自己的情况来定义想要的比例效果!

bottomCenter (0.5, 1.0) 底部中心

bottomLeft (0.0, 1.0) 左下角

bottomRight (1.0, 1.0) 右下角

center (0.5, 0.5) 水平垂直居中

centerLeft (0.0, 0.5) 左边缘中心

centerRight (1.0, 0.5) 右边缘中心

topCenter (0.5, 0.0) 顶部中心

topLeft (0.0, 0.0) 左上角

topRight (1.0, 0.0) 右上角

完整代码

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Align'),
        ),
        // Column组件忽略,重点是里面的
        body: Column(
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Colors.blue,
              child: Align(
                alignment: FractionalOffset(0, 0),
                child: const Card(child: Text('Hello World!')),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.red,
              child: Align(
                alignment: Alignment.topRight,
                child: const Card(child: Text('Hello World!')),
              ),
            ),
            Container(
              width: 100,
              height: 100,
              color: Colors.green,
              child: Align(
                alignment: Alignment.bottomLeft,
                child: const Card(child: Text('Hello World!')),
              ),
            ),
          ],
        ));
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}

3.Center属性

下面列举了Center的属性

class Center extends Align {
  /// Creates a widget that centers its child.
  const Center({ Key key, double widthFactor, double heightFactor, Widget child })
    : super(key: key, widthFactor: widthFactor, heightFactor: heightFactor, child: child);
}

属性说明：

Center继承自Align，只不过是将alignment设置为Alignment.center，其他属性例如widthFactor、heightFactor，布局行为，都与Align完全一样，就不单独做介绍了.

代码效果

我自己添加了一些效果提供大家参考

完整代码

import 'package:flutter/material.dart';

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text('Center'),
        ),
        body: Center(
          child: const Card(child: Text('Hello World!')),
        ));
  }
}

void main() {
  runApp(
    new MaterialApp(
      title: 'Flutter教程',
      home: new LayoutDemo(),
    ),
  );
}

大家有其他的更加快捷的方法，欢迎大家可以拿出来交流和讨论，谢谢。