Flutter - SliverAppBar 中的圆角答案

【问题标题】：Flutter - Rounded corners in SliverAppBarFlutter - SliverAppBar 中的圆角
【发布时间】：2019-04-24 09:30:00
【问题描述】：

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

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

如何在SliverAppBar中拥有圆角？

【问题讨论】：

是的，AppBar 确实有属性形状
如果缺少该属性，您能否使用您可用的代码创建自己的自定义小部件？
你会用什么小部件来实现滚动视差？

标签： dart flutter

【解决方案1】：

这是更改 SliverAppBar 形状的正确且简单的方法（如 Flutter 文档中所述）。不需要你使用任何技巧。甚至你可以将它塑造成任何你想要的形状。

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

【讨论】：

改用RoundedRectangleBorder()。
SliverAppBar 的borderRadius 在扩展时不适用于flexibleSpace。如何解决此问题？？

【解决方案2】：

如果有人需要用SliverPersistentHeader添加底部边框角

在委托中：

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

【讨论】：

【解决方案3】：

我使用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)),
        ),
      ),

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

【讨论】：

如我所说，我已经实现了这个结果（通过更改 AppBarShape）

【解决方案4】：

SliverAppBar 小部件中没有缺少此属性，它类似于 AppBar 小部件，但您不需要 Scaffold 小部件中的 'appBar:' 属性，您需要 'body:' 属性，并且您必须在其上添加 CustomScrollView 小部件，并且在 ' slivers:' 属性，您可以添加从 SliverAppBar 开始的 Widget 列表，并且您可以根据需要添加 SliverList、SliverGrid、我试过了，它完成了，这是我的代码。脚手架（正文：自定义滚动视图（条子：[ SliverAppBar( 展开高度：180，标题：文本（'RoundedRectangleBorder'），形状：圆角矩形边框（边界半径：边界半径.vertical（底部：半径.圆形（40）， ), ), ), ], ), );

【讨论】：