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，我仍然有这种行为。

如何避免这种“横幅溢出”？

非常感谢！

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

考虑交换横幅广告及其子容器。在您的代码中，横幅被放置在容器上。而是将其放在卡上。看起来应该像这样

StreamInterface

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添加到反转容器和横幅广告

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

自从您花了点时间并发布了示例代码和图片后，我决定退回您的支持。

Flutter横幅不适合

3 个答案: