Flutter 横幅不适合

Question

我对横幅小部件有疑问。为了演示它，我制作了一些演示代码。我想要的是在容器的右上角有一个横幅，但它很难看，因为它溢出了它的child（请看附图）。

这是我的代码：

class TestPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Banner(
          message: "hello",
          location: BannerLocation.topEnd,
          color: Colors.red,
          child: Container(
            margin: const EdgeInsets.all(10.0),
            color: Colors.yellow,
            height: 100,
            child: Center(child: Text("Hello, banner!"),),
          ),
        ),
      ),
    );
  }
}

我尝试使用边距，但即使边距设置为 0，我仍然有这种行为。

如何避免这种情况'banner overflow'？

非常感谢！

Answer 1

将您的 Banner 包裹在 ClipRect 小部件中并移除边距 :

            ClipRect(
                      child: Banner(
                        message: "hello",
                        location: BannerLocation.topEnd,
                        color: Colors.red,
                        child: Container(
                          color: Colors.yellow,
                          height: 100,
                          child: Center(
                            child: Text("Hello, banner!"),
                          ),
                        ),
                      ),
                    ),

Answer 2

考虑交换横幅及其子容器。在您的代码中，横幅放置在容器上。相反，将其放在卡片上。它应该是这样的

Scaffold(
    body: Center(
      child: Container(
        margin: const EdgeInsets.all(10.0),
        color: Colors.yellow,
        height: 100,
        child: Banner(
          message: "hello",
          location: BannerLocation.topEnd,
          color: Colors.red,
          child: Center(child: Text("Hello, banner!"),),
        ),
      ),
    ),
  );

Answer 3

只需将 ClipRect 添加到 Op 的代码中

return Scaffold(
      body: Center(
        child: ClipRect(
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(
              margin: const EdgeInsets.all(10.0),
              color: Colors.yellow,
              height: 100,
              child: Center(child: Text("Hello, banner!"),),
            ),
          ),
        ),
      ),
    );

翻转容器和横幅

return Scaffold(
      body: Center(
        child: Container(
          margin: const EdgeInsets.all(10.0),

          height: 100,
          color: Colors.yellow,
          child: Banner(
            message: "hello",
            location: BannerLocation.topEnd,
            color: Colors.red,
            child: Container(


              child: Center(child: Text("Hello, banner!"),),
            ),
          ),
        ),
      ),

添加 ClipRect 以反转 Container 和 Banner

return Scaffold(
      body: Center(
        child: ClipRect(
        child: Container(
          margin: const EdgeInsets.all(10.0),

          height: 100,
          color: Colors.yellow,

            child: Banner(
              message: "hello",
              location: BannerLocation.topEnd,
              color: Colors.red,
              child: Container(


                child: Center(child: Text("Hello, banner!"),),
              ),
            ),
          ),
        ),
      ),
    );

https://docs.flutter.io/flutter/widgets/ClipRect-class.html

既然你花时间发布了示例代码和图片，我决定 return 帮个忙。

Flutter 横幅不适合

Flutter banner does not fit

banner

flutter