我有横幅小部件的问题。为了演示它,我做了一些演示代码。我想要的是在容器的右上角有一个横幅,但它很难看,因为它溢出了它的孩子(请参阅附图)。
这是我的代码:
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
既然您花了很多时间并发布了示例代码和图像,我决定回报这个问题。
将你的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!"),
),
),
),
),
考虑交换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!"),),
),
),
),
);