Flutter - 使用底部圆角边框时，小部件之间出现背景，如何隐藏或连接小部件边框？答案

【问题标题】：Flutter - Background appears between widgets when using bottom rounded borders, how to hide or connect widget borders?Flutter - 使用底部圆角边框时，小部件之间出现背景，如何隐藏或连接小部件边框？
【发布时间】：2020-07-31 01:26:34
【问题描述】：

我正在尝试制作一个屏幕，其中所有底部边框（底部的最后一个边框除外）都应具有左右圆形的底部边框。

我可以创建圆形边框，但是，如何隐藏圆形顶部边框的背景颜色并将其连接到前一个小部件？

如下图所示，我有圆形边框，但背景颜色（绿色）出现在蓝色和红色之间。怎么隐藏？

如何实现边界连接？

代码

    @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.green,
        appBar: AppBar(
          elevation: 0,
          automaticallyImplyLeading: true,
          actions: <Widget>[
            IconButton(
              icon: Icon(Icons.search),
              onPressed: () {},
            ),
          ],
        ),
        body: Column(
          mainAxisSize: MainAxisSize.max,
          children: <Widget>[
            ClipRRect(
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(15),
                  bottomRight: Radius.circular(15)),
              child: Container(
                height: 250.0,
                margin: const EdgeInsets.only(
                    bottom: 6.0), //Same as `blurRadius` i guess
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(15),
                      bottomRight: Radius.circular(15)),
                  color: Colors.blue,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0.0, 1.0), //(x,y)
                      blurRadius: 6.0,
                    ),
                  ],
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.only(
                  bottomLeft: Radius.circular(15),
                  bottomRight: Radius.circular(15)),
              child: Container(
                height: 300.0,
                margin: const EdgeInsets.only(
                    bottom: 6.0), //Same as `blurRadius` i guess
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(15),
                      bottomRight: Radius.circular(15)),
                  color: Colors.red,
                  boxShadow: [
                    BoxShadow(
                      color: Colors.grey,
                      offset: Offset(0.0, 1.0), //(x,y)
                      blurRadius: 6.0,
                    ),
                  ],
                ),
              ),
            ),            
          ],
        ),
      ),
    );
  }

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

我已经用下一个 ClipRRec 的颜色（背景）将第一个 ClipRRect 包裹在一个 Container 中，这样我就达到了我想要的效果。我不确定这是否正确

Container(
         color: Colors.red,
         child: ClipRRect(
             borderRadius: BorderRadius.only(
             bottomLeft: Radius.circular(15),
             bottomRight: Radius.circular(15)),
             child: Container(
                  height: 250.0,
                  margin: const EdgeInsets.only(
                      bottom: 6.0), //Same as `blurRadius` i guess
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.only(
                        bottomLeft: Radius.circular(15),
                        bottomRight: Radius.circular(15)),
                    color: Colors.blue,
                    boxShadow: [
                      BoxShadow(
                        color: Colors.grey,
                        offset: Offset(0.0, 1.0), //(x,y)
                        blurRadius: 6.0,
                      ),
                    ],
                  ),
                ),
              ),
            ),

结果

【讨论】：