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(

        )
      ),
    );
  }

問題截圖

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(),
    ),
  );
}

Answer 2

您可以嘗試：到任意一條邊的邊距

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

您可以嘗試：到任何所有邊緣的邊距

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

如果您需要當前系統填充或小部件上下文中的視圖插入，請考慮使用 [MediaQuery.of] 獲取這些值，而不是使用來自 [dart:ui.window] 的值，以便您收到更改通知。

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

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),
  ),
),

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
            (
                ...
            ),
        ),
    );
}