Flutter布局容器外边距

Question

我在Flutter布局方面遇到了问题。

我有一个简单的容器，左右边距为20.0。在这个容器内部，我有另一个容器。

但是这个容器只在左侧与父容器不匹配。我不知道为什么会出现这种情况。

以下是我的代码：

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      backgroundColor: Colors.white,
      body: new Container(
        margin: new EdgeInsets.symmetric(horizontal: 20.0),
        child: new Container(

        )
      ),
    );
  }

问题截图

这是一张关于IT技术的问题截图。

- M. Berg

---

你确定吗？我们可以清楚地看到每侧的两个竖杠。 - Rémi Rousselet

是的，父容器是正确的，但子容器不适合父容器（标记为蓝色区域）。 - M. Berg

已解决。在检查器中选择了错误的小部件，是我的错。 - M. Berg

如果您想知道子Widget如何适应父Widget，请将子Widget放入容器中并为容器设置颜色。 - Mahesh Jamdade

Answer 1

你可以使用左和右的值 :)

@override
Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Colors.white,
    body: Container(
      margin: const EdgeInsets.only(left: 20.0, right: 20.0),
      child: Container(),
    ),
  );
}

- Adonis González

---

还可以使用“margin: EdgeInsets.fromLTRB(20.0, 0.0, 20.0, 0.0)”这个属性。 - dmarquina

你为什么写了 const？ - Cold_Class

@Cold_Class const 是一个关键字，表示构造函数是常量构造函数，即它只能接受编译时值，而不能接受在运行时计算的值，如某些变量。 - Kushagra Saxena

@KushagraSaxena 这样做有什么好处吗？比如性能提升？因为我想将多个元素的边距值存储在一个变量中可能非常有用。 - Cold_Class

@Cold_Class 不，这与性能无关。这只是Dart建议遵循的约定。https://dart.dev/guides/language/effective-dart/design#consider-making-your-constructor-const-if-the-class-supports-it - Kushagra Saxena

修复了！难以置信，为什么？EdgeInsets.symmetric是通过分配left、right来实现的，基本上是一样的，EdgeInsets.only也是如此。 - http8086

Answer 2

你可以尝试：将任何一个边缘调整到边缘。

Container(
    margin: const EdgeInsets.only(left: 20.0, right: 20.0),
    child: Container()
)

你可以尝试：将所有边缘的页边距设为零

Container(
    margin: const EdgeInsets.all(20.0),
    child: Container()
)

如果您需要在小部件上下文中获取当前系统填充或视图插入，考虑使用[MediaQuery.of]获取这些值，而不是使用[dart:ui.window]中的值，以便在更改时得到通知。

Container(
    margin: EdgeInsets.fromWindowPadding(padding, devicePixelRatio),
    child: Container()
)

- vinod yadav

---

真的吗？为什么 EdgeInsets.symmetric(horizontal: 20.0) 不起作用，而 EdgeInsets.only(left: 20.0, right: 20.0) 起作用了，对我来说看起来是一样的，因为我检查了两者的实现。 - http8086

Answer 3

Container(
  margin: EdgeInsets.all(10) ,
  alignment: Alignment.bottomCenter,
  decoration: BoxDecoration(
    gradient: LinearGradient(
      begin: Alignment.topCenter,
      end: Alignment.bottomCenter,
      colors: <Color>[
        Colors.black.withAlpha(0),
        Colors.black12,
        Colors.black45
      ],
    ),
  ),
  child: Text(
    "Foreground Text",
    style: TextStyle(color: Colors.white, fontSize: 20.0),
  ),
),

- Mhammed Khaled

---

你能否添加一些细节来解释你的代码如何回答这个问题？ - Guillaume S

Answer 4

您可以尝试以下几种方式来设置边距。

@override
Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.white,
        body: Container (
            // Even margin on all sides
            margin: EdgeInsets.all(10.0),
            // Symetric margin
            margin: EdgeInsets.symmetric(vertical: 10.0, horizontal: 5.0),
            // Different margin for all sides
            margin: EdgeInsets.fromLTRB(1.0, 2.0, 3.0, 4.0),
            // Margin only for left and right sides
            margin: const EdgeInsets.only(left: 10.0, right: 10.0),
            // Different margin for all sides
            margin: EdgeInsets.only(left: 5.0, top: 10.0, right: 15.0, bottom: 20.0),

            child: Child
            (
                ...
            ),
        ),
    );
}

- Codemaker

Answer 5

边距和填充并排。

Container(
        padding: const EdgeInsets.fromLTRB(10, 10, 10, 10),
        margin: const EdgeInsets.fromLTRB(10, 10, 10, 10),
}

填充和边距而已。

Container(
        padding: const EdgeInsets.only(left: 10.0, right: 10.0),
        margin: const EdgeInsets.only(left: 10.0, right: 10.0),
}

内边距和外边距四面相同。

Container(
        padding: const EdgeInsets.all(10.0),
        margin: const EdgeInsets.all(10.0),
}

- infomasud