dart 浮动布局容器边距

velaa5lx 于 2023-03-27 发布在其他

关注(0)|答案(5)|浏览(118)

我的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(

        )
      ),
    );
  }

Screenshot of the Problem

dart

来源：https://stackoverflow.com/questions/49369950/flutter-layout-container-margin

5条答案

按热度按时间

iq3niunx1#

你可以使用左值和右值：）

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

赞(0）回复(0）举报 2023-03-27

2wnc66cl2#

您可以尝试：到任何一个边缘的边缘

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

赞(0）回复(0）举报 2023-03-27

2nbm6dog3#

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

赞(0）回复(0）举报 2023-03-27

oalqel3c4#

您可以尝试通过以下方式设置边距。

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

赞(0）回复(0）举报 2023-03-27

nnvyjq4y5#

如果小部件中存在边距，请使用用途：