使用 Flutter 框架的 Container 小部件中的边距和填充有什么区别？答案

【问题标题】：what the difference between margin and padding in Container widget using Flutter framework?使用 Flutter 框架的 Container 小部件中的边距和填充有什么区别？
【发布时间】：2021-07-24 19:50:06
【问题描述】：




class app1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return (MaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Hello ',
        home: Material(
          child: Container (
            alignment: Alignment.topCenter ,
            //padding: EdgeInsets.all (30 ),
            margin: EdgeInsets.all(30),
            child: Row(
              children: <Widget> [
                Text ( 'Hello There ' , style: TextStyle (fontSize: 30 ) ),
                ],
              ),
          ),
          ),



          )
    );

  }
}

我在应用边距时有一个文本小部件，然后应用填充相同的结果？那么有什么不同呢？

【问题讨论】：

边距通常是从工作区（屏幕）边缘开始的测量值。而填充通常是该区域内不同元素之间的间距。尝试添加第二个元素，然后调整填充，你会看到不同。
你的意思是在 Row 中添加另一个文本小部件？

标签： flutter padding margin

【解决方案1】：

Padding：是元素到边缘的内部空间

Margin：是小部件之间的间距

【讨论】：

在文本小部件中不会看到不同的 .那么必须使用哪个小部件才能看到差异？
如图所示，我们有两个容器，一个黄色带填充，另一个蓝色带边距。里面的孩子是黄色的，边缘有空间，我们称之为 Padding，但蓝色容器与其他容器有外部空间，我们称之为 Margin

【解决方案2】：

简单的方法：

**Padding is Space Around 表示容器中。

Margin is Space outside 表示容器外侧**

【讨论】：

【解决方案3】：

边距是小部件周围的空间。比如从容器边缘到手机屏幕边缘。

填充是小部件内的空间。比如从容器的边缘到里面的文字。

在 0:40 左右观看来自 Flutter 团队的视频，快速了解一下。 https://api.flutter.dev/flutter/widgets/Container-class.html

【讨论】：

是的，我看过视频，但我想自己测试一下。