我对横幅小部件有疑问。为了演示它,我制作了一些演示代码。我想要的是在容器的右上角有一个横幅,但它很难看,因为它溢出了它的 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,我仍然有这种行为。
如何避免这种“横幅溢出”?
非常感谢!
最佳答案
只需将 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
既然您花时间发布了示例代码和图片,我决定返回您的帮助。
关于Flutter 横幅不适合,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55480316/