Flutter如何使用ClipRect实现AppBar下方绿色弧形区域并解决内容溢出

问题原因 #

• 你当前仅给白色Container设置了borderRadius圆角装饰，Flutter中Container默认clipBehavior属性为Clip.none，不会对内部子元素进行裁剪，所以滚动时内容会超出圆角边界，覆盖到上方绿色区域。

解决方案 #

你要求的ClipRect为普通矩形裁剪组件，要实现弧形圆角裁剪效果，可以使用其衍生的ClipRRect组件，包裹白色容器后即可将内部所有滚动内容限制在圆角边界内，不会溢出到上方绿色区域。修改后的代码如下：

Scaffold(
  backgroundColor: appGreenColor,
  appBar: AppBar(
    centerTitle: false,
    backgroundColor: appGreenColor,
    elevation: 0,
    title: Padding(
      padding: const EdgeInsets.only(left: 16.0),
      child: Image.asset(
        "lib/Assets/dicon.png",
        fit: BoxFit.fill,
        height: 40,
        width: 78,
      ),
    ),
    actions: [
      Padding(
        padding: const EdgeInsets.only(right: 8.0),
        child: IconButton(
            icon: Image.asset(
              "lib/Assets/notification1.png",
              height: 22,
              width: 22,
            ),
            onPressed: () {
              Navigator.push(
                  context,
                  MaterialPageRoute(
                      builder: (context) => NotificationList()));
            }),
      )
    ],
  ),
  body: ClipRRect(
    // 把原来Container的圆角配置挪到ClipRRect上
    borderRadius: const BorderRadius.only(
      topLeft: Radius.circular(28),
      topRight: Radius.circular(28),
    ),
    child: Container(
      height: MediaQuery.of(context).size.height - 70,
      decoration: const BoxDecoration(
        color: Colors.white,
      ),
      child: SingleChildScrollView(
        child: Column(
          children: [
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 3),
              child: Column(
                children: [
                  locationView(),
                  imageSlider(),
                  genderView(),
                  categories(),
                  isMan == true
                      ? maleTopBranches.isEmpty
                          ? const SizedBox()
                          : topRatedSalons(maleTopBranches)
                      : topRatedSalons(femaleTopBranches),
                ],
              ),
            ),
            offerImage(),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 2.0),
              child: Column(
                children: [
                  services(),
                  nearByAppointment(),
                ],
              ),
            ),
            infoImage()
          ],
        ),
      ),
    ),
  ),
);

轻量化替代方案：如果不想额外嵌套ClipRRect组件，也可以直接给原有白色Container添加clipBehavior: Clip.antiAlias属性，无需修改其他代码，也能实现相同的内容裁剪效果。

内容的提问来源于stack exchange，提问作者Deepak