Flutter-SliverAppBar中的圆角

Question

在Flutter中，您可以在 AppBar 小部件中使用具有 shape 属性的自定义形状，但是在 SliverAppBar 小部件中缺少此属性

  AppBar(
    title: Text('Hello'),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.vertical(
        bottom: Radius.circular(30),
      ),
    ),
  ),

如何在 SliverAppBar 中具有圆角？

Answer 1

这是更改SliverAppBar形状的正确且简便的方法（如Flutter文档中所述）。无需使用任何技巧。甚至您也可以将其塑造为任意形状。

SliverAppBar(
  shape: ContinuousRectangleBorder(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(30), bottomRight: Radius.circular(30))),
  title: Text('Sliver AppBar'),
);

Answer 2

我使用BorderRadius小部件实现了这种设计。

Container(
        height: 75.0,
        child: Center(child: new Text("Hello",
          textAlign: TextAlign.center,
          style: TextStyle(
            height: 2.5,
            color: Colors.white,
            fontSize: 18.0,
          ),
        )),
        decoration: new BoxDecoration(
          color: Colors.blue,
          boxShadow: [new BoxShadow(blurRadius: 3.0)],
          borderRadius: BorderRadius.vertical(bottom: Radius.circular(19.0)),
        ),
      ),

这不会为您提供视差滚动功能

Answer 3

如果有人需要使用SliverPersistentHeader添加下边框角

在代表中：

Container(
  clipBehavior: Clip.hardEdge,
  decoration: BoxDecoration(
    borderRadius: const BorderRadius.vertical(bottom: Radius.circular(15.0)),
  ),
  child: Image()
)