Flutter 填充布局

Flutter 填充布局(Padding)，Padding用于处理容器与其子元素之间的间距，与padding属性对应的是margin属性，margin处理容器与其他组件之间的间距。Padding组件的常见属性如下所示：

接下来我们写一个例子，容器里嵌套了一个容器，两个容器分别加了一个边框，以便测试Padding值。

示例代码如下：

import 'package:flutter/material.dart';
void main() => runApp(
  MaterialApp(
    title: 'Padding填充布局示例',
    home: LayoutDemo(),
  ),
);

class LayoutDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Padding填充布局示例'),
      ),
      body: Center(
        // 添加容器：外框
        child: Container(
          width: 300.0,
          height: 300.0,
          // 容器内边距上下左右设置为60.0
          padding: EdgeInsets.all(6.0),
          // 添加边框
          decoration: BoxDecoration(
              color: Colors.white,
              border: Border.all(
                color: Colors.green,
                width: 8.0,
              ),
          ),
          // 添加容器：内框
          child: Container(
              width: 200.0,
              height: 200.0,
              // 添加边框
              decoration: BoxDecoration(
                color: Colors.white,
                border: Border.all(
                  color: Colors.blue,
                  width: 8.0,
                ),
              ),
              // 添加图标
              child: FlutterLogo(),
          ),
        ),
      ),
    );
  }
}

上述示例代码的Padding值为60.0。视图展现大致如图所示:

接着再将Padding值改为6.0。注意此时的值小了很多，我们会发现两个容器之间的间距小了很多，如图所示:

酷客教程相关文章：

• Flutter 居中布局
• Flutter 容器布局
• Flutter 导航组件集
• Flutter 按钮组件