Flutter - 在SliverAppBar中实现圆角

Question

在Flutter中，您可以使用AppBar小部件中的形状属性来拥有自定义形状，但是这个属性在SliverAppBar小部件中缺失。

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

如何在SliverAppBar中实现圆角？

- Tiziano Munegato

---

是的，AppBar确实具有形状属性。 - Tiziano Munegato

如果该属性缺失，您可否使用可用的代码创建自定义小部件？ - F-1

你会使用哪个小部件来实现滚动视差效果？ - Tiziano Munegato

Answer 1

这是更改SliverAppBar形状的正确简单方法(如Flutter文档中所述)。无需使用任何技巧，甚至可以将其形状变成任何想要的形状。

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

- Simran Singh

---

请使用RoundedRectangleBorder() 替代。 - Watery Desert

SliverAppBar 的 borderRadius 在展开时不起作用于 flexibleSpace。如何解决？ - Satyajyoti Biswas

Answer 2

如果有人需要在 SliverPersistentHeader 中添加底部边框角落：

在代理中：

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

- Den

Answer 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)),
        ),
      ),

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

- Vishal G. Gohel

---

就像我说的那样，我已经通过更改AppBarShape实现了这个结果。 - Tiziano Munegato

Answer 4

 SliverOverlapAbsorber(
                    handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
                        context),
                    sliver: SliverAppBar(
                      pinned: true,
                      stretch: true,
                      automaticallyImplyLeading: false,
                      expandedHeight: 180,
                      flexibleSpace: FlexibleSpaceBar(
                        stretchModes: const <StretchMode>[
                          StretchMode.zoomBackground,
                          StretchMode.blurBackground,
                        ],
                        background: Stack(
                          children: [
                            CustomImage(
                              path: "assets/images/profile.png",
                              width: MediaQuery.of(context).size.width,
                              fit: BoxFit.fill,
                            ),
                            Container(
                              color: iconGreyColor.withOpacity(0.2),
                            ),
                            Positioned(
                                bottom: 50,
                                child: Row(
                                  children: [
                                    CustomImage(
                                      path: "assets/images/notification.png",
                                    ),
                                    Icon(Icons.message),
                                    Icon(Icons.search)
                                  ],
                                ))
                          ],
                        ),
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.vertical(
                          bottom: Radius.circular(30),
                        ),
                      ),
                    ))

- shazawdidi

Answer 5

appBar: AppBar(
    shape: ContinuousRectangleBorder(
        borderRadius: BorderRadius.only(
            bottomLeft: Radius.circular(100),
            bottomRight: Radius.circular(100))),
  ), 

- Yasmin Ali

---

感谢您为Stack Overflow社区做出贡献。这可能是一个正确的答案，但如果您能提供代码的额外解释，以便开发者理解您的思路，那将非常有用。对于不太熟悉语法或难以理解概念的新手开发者来说，这尤其有帮助。请您善意地编辑您的答案，以包含额外的细节，以造福社区。 - Jeremy Caney

Answer 6

这个属性在SliverAppBar小部件中并不缺失，它类似于AppBar小部件，但是你不需要在Scaffold小部件中使用'appBar:'属性，而是需要使用'body:'属性，并在其中添加CustomScrollView小部件，在'slivers:'属性中，你可以添加一系列的小部件，从SliverAppBar开始，然后根据需要添加SliverList、SliverGrid等。 我尝试过了，已经完成了，这是我的代码。

Scaffold(
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            expandedHeight: 180,
            title: Text('RoundedRectangleBorder'),
            shape: RoundedRectangleBorder(
              borderRadius: BorderRadius.vertical(
                bottom: Radius.circular(40),
              ),
            ),
          ),
        ],
      ),
    );

- Saeed Dai Alnoor