【Flutter】容器类组件之填充

前言

Padding可以给其子节点添加填充（留白）。

接口描述

class EdgeInsets extends EdgeInsetsGeometry {
  // 分别指定四个方向的填充
  const EdgeInsets.fromLTRB(this.left, this.top, this.right, this.bottom);
  // 所有方向均使用相同数值的填充
  const EdgeInsets.all(double value)
    : left = value,
      top = value,
      right = value,
      bottom = value;
  // 可以设置具体某个方向的填充(可以同时指定多个方向)。
  const EdgeInsets.only({
    this.left = 0.0,
    this.top = 0.0,
    this.right = 0.0,
    this.bottom = 0.0,
  });
  // 用于设置对称方向的填充，vertical指top和bottom，horizontal指left和right。
  const EdgeInsets.symmetric({
    double vertical = 0.0,
    double horizontal = 0.0,
  }) : left = horizontal,
       top = vertical,
       right = horizontal,
       bottom = vertical;

代码示例

// 填充(padding)

import 'package:flutter/material.dart';

class PaddingTestRoute extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return Padding(
      // 上下左右各添加16像素补白
      padding: EdgeInsets.all(16.0),
      child: Column(
        // 显式指定对齐方式为左对齐，排除对齐干扰
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Padding(
            // 左边添加8像素补白
            padding: const EdgeInsets.only(left: 8.0),
            child: Text('Hello world',style: TextStyle(color: Colors.blue),),
          ),
          Padding(
            //
            padding: EdgeInsets.symmetric(vertical: 8.0),
            child: Text('I am Hah',style: TextStyle(color: Colors.yellow),),
          ),
          Padding(
            // 分别指定四个方向的补白
            padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 20.0),
            child: Text('Your Dear',style: TextStyle(color: Colors.red),),
          ),

        ],
      ),
    );

  }
}

总结

暂无。