我想创建一个看起来像这样的小部件:
我有这个代码:
Widget build(BuildContext context) {
final theme = Theme.of(context);
return Container(
decoration: BoxDecoration(
color: theme.cardColor,
borderRadius: BorderRadius.circular(10),
boxShadow: [
BoxShadow(
color: theme.shadowColor,
blurRadius: 5,
offset: Offset(0, 2),
),
],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Padding(
padding: EdgeInsets.all(10),
child: Text(
widget.title,
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: theme.accentColor,
),
),
),
],
),
Row(
children: [
Padding(
padding: EdgeInsets.symmetric(horizontal: 15),
child: Text(
"Alarm Date: " + widget.alarmDate.toString(),
style: TextStyle(
fontSize: 16,
color: theme.textTheme.bodyText1?.color,
),
),
),
Spacer(),
Switch(
value: _isToggled,
onChanged: (value) {
setState(() {
_isToggled = value;
});
},
activeColor: theme.accentColor,
),
SizedBox(width: 10),
],
),
Expanded(child:SizedBox()),
Container(
height: 20,
width: double.infinity,
// padding: EdgeInsets.all(10),
padding: EdgeInsets.only(bottom: 5),
color: theme.secondaryHeaderColor,
child: Row(
children: [
Expanded(child: SizedBox()),
Text(
widget.repeatDays.join(" "),
style: TextStyle(
fontSize: 16,
color: theme.textTheme.bodyText1?.color,
),
),
Expanded(child: SizedBox())
]
)
),
],
),
);
}
这就是结果:
问题是底部容器与其父容器的边缘重叠。我如何使它适合其父容器的边缘?我尝试为最后一个容器提供相同的边缘,但由于大小不同,底部边缘看起来仍然与顶部边缘不同。
2条答案
按热度按时间2jcobegt1#
您需要在顶部Container上提供
clipBehavior
,默认为none。4c8rllxm2#
您可以将最外面的容器 Package 在ClipRRect中,以剪切整个容器(也包含底部容器)的角落。
请参阅有关如何使用它的文档。
ClipRRect类