Flutter横幅不适合

Question

我有一个横幅小部件的问题。为了演示这个问题，我制作了一些演示代码。我想要的是在容器的右上角放置一个横幅，但它很难看，因为它超出了它的子元素（请参见附带的图像）。

这里是我的代码：

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，仍然存在这种情况。如何避免这种“横幅溢出”？非常感谢！

- Tom

Answer 1

只需将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添加到反转容器和横幅中

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

既然你花时间发布了示例代码和图片，我决定回报一下。

- user1462442

---

非常感谢您提供详细的答案！ - Tom

你提出了一个相对详细的问题。 - user1462442

添加ClipRRect就可以解决问题了。感谢答案。 - Deepak swain

Answer 2

将您的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!"),
                          ),
                        ),
                      ),
                    ),

- diegoveloper

Answer 3

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

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!"),),
        ),
      ),
    ),
  );

- Sampath Balivada