Flutter可滚动组件中如何实现带装饰效果的自定义边框

参考实现效果：

实现逻辑很简单，边框固定在滚动组件外层即可，不需要和滚动内容绑定，不会跟随内容滚动：

• 首选方案是给滚动组件套一层父容器，用Container的decoration属性直接配置边框，无需修改滚动组件本身的逻辑
• 如果需要实现参考图中四个角的特殊装饰效果，用Stack组件把四个角的装饰块固定在父容器的四个顶点即可，层级放在滚动组件上方，不会遮挡核心内容
• 该方案适配所有可滚动组件，包括ListView、GridView、SingleChildScrollView等，滚动性能不受任何影响

示例代码（Flutter）：

// 基础边框实现
Container(
  margin: const EdgeInsets.all(16),
  decoration: BoxDecoration(
    border: Border.all(color: const Color(0xFFCCCCCC), width: 1.5),
    borderRadius: BorderRadius.circular(12),
  ),
  child: ListView.builder(
    padding: const EdgeInsets.all(12),
    itemCount: 30,
    itemBuilder: (context, index) => Padding(
      padding: const EdgeInsets.symmetric(vertical: 8),
      child: Text("滚动内容项 $index"),
    ),
  ),
)

如果需要自定义角部装饰，只需要把外层容器换成Stack，叠加四个角的装饰组件即可：

Stack(
  children: [
    ListView.builder(
      padding: const EdgeInsets.all(12),
      itemCount: 30,
      itemBuilder: (context, index) => Padding(
        padding: const EdgeInsets.symmetric(vertical: 8),
        child: Text("滚动内容项 $index"),
      ),
    ),
    // 左上角装饰
    Positioned(left: 0, top:0, child: CustomCornerDecoration()),
    // 右上角装饰
    Positioned(right: 0, top:0, child: CustomCornerDecoration()),
    // 左下角装饰
    Positioned(left: 0, bottom:0, child: CustomCornerDecoration()),
    // 右下角装饰
    Positioned(right: 0, bottom:0, child: CustomCornerDecoration()),
  ],
)

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