flutter 如何使一个组件不与其父组件的边重叠?

ztyzrc3y  于 2023-04-07  发布在  Flutter
关注(0)|答案(2)|浏览(149)

我想创建一个看起来像这样的小部件:

我有这个代码:

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())

              ]
            )
          ),

        ],
      ),
    );
  }

这就是结果:

问题是底部容器与其父容器的边缘重叠。我如何使它适合其父容器的边缘?我尝试为最后一个容器提供相同的边缘,但由于大小不同,底部边缘看起来仍然与顶部边缘不同。

2jcobegt

2jcobegt1#

您需要在顶部Container上提供clipBehavior,默认为none。

return Container(
    clipBehavior: Clip.antiAlias,/// or hardEdge, based on you
    decoration: BoxDecoration(
      color: theme.cardColor,
4c8rllxm

4c8rllxm2#

您可以将最外面的容器 Package 在ClipRRect中,以剪切整个容器(也包含底部容器)的角落。
请参阅有关如何使用它的文档。
ClipRRect类

相关问题