第011期 如何在Flutter中定义边距和填充？

[Natoto]

[Natoto]

内边距margin 和外边距边距 padding

body: Center(
  child: Container(
    child:  new Text("hello zzl ",
    style: TextStyle(
      fontSize: 40.0,
    ),
      textAlign: TextAlign.center,
    ),
    alignment: Alignment.topCenter,
    width: 500.0,
    height: 400.0,
    color: Colors.blue,
    padding: const EdgeInsets.all(50.0),//外边距
   // margin: const EdgeInsets.all(100.0),//内边距
  ),
  ),

填充控件 Padding

Padding的布局分为两种情况：

当child为空的时候，会产生一个宽为left+right，高为top+bottom的区域； 当child不为空的时候，Padding会将布局约束传递给child，根据设置的padding属性，缩小child的布局尺寸。然后Padding将自己调整到child设置了padding属性的尺寸，在child周围创建空白区域。

import 'package:flutter/material.dart';
class PaddingDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title:new Text("padding填充控件"),
      ),
      body: new Padding(
          padding: const EdgeInsets.all(8.0),
        child: new Image.asset("images/hua3.png"),
      ),
    );
  }
}
void main(){
  runApp(new MaterialApp(
    title: "padding填充控件",
    home: new PaddingDemo(),
  ));