Flutter中Container组件设置margin的实现方法咨询

嘿，别担心，Flutter里给Container添加margin完全没问题！只是它的实现逻辑和iOS/Android的写法不太一样，我来给你捋清楚～

其实Container组件本身就自带了margin属性，它接受一个EdgeInsets类型的值，你可以根据需求灵活设置不同方向的间距：

• 四周统一间距：用EdgeInsets.all(double value)，比如margin: EdgeInsets.all(16.0)就会给容器上下左右都留16像素的间距
• 水平/垂直方向统一间距：用EdgeInsets.symmetric({double horizontal, double vertical})，比如margin: EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0)，水平方向左右各20，垂直方向上下各10
• 单独设置某几个方向：用EdgeInsets.only({left, top, right, bottom})，比如margin: EdgeInsets.only(left: 10.0, bottom: 20.0)，只给左边和下边加间距
• 精确设置四个方向：用EdgeInsets.fromLTRB(double left, double top, double right, double bottom)，依次传入左、上、右、下的数值

我把你的代码改成带margin的示例，你可以直接参考：

import 'package:flutter/material.dart';
void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primaryColor: Colors.blue,
      ),
      home: new Scaffold(
        body: new Container(
          // 给容器四周设置20像素的margin
          margin: const EdgeInsets.all(20.0),
          // 顺便提下padding，这是容器内部和子组件的间距，别和margin搞混哦
          padding: const EdgeInsets.all(15.0),
          color: Colors.lightBlueAccent,
          child: new Text("我是带margin的Container"),
        ),
      ),
    );
  }
}

另外要注意区分margin和padding：margin是容器和外部其他组件的间距，padding是容器内部和子组件的间距，别搞混啦～

内容的提问来源于stack exchange，提问作者Sam Tang