时间戳

首页 > 解决方案 > 如何使 SliverAppBar 的边缘透明？

flutter - 如何使 SliverAppBar 的边缘透明？

问题描述

如果您可以看到带有图表的容器的边缘不是透明的FlexibleSpace，AppBar并且看起来很奇怪。现在我有一个Scaffold然后我把主题的背景，我也试图让它透明但它根本不起作用

截屏

      Widget pageOne() {
        return Container(
      child: Padding(
        padding: EdgeInsets.only(top: 30),
        child: Column(children: [Expanded(child: LineChartWidget())]),
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.only(
        topLeft: Radius.circular(50),
      )),
    );
    }

     Widget pageTwo() {
    return Container(
      child: Padding(
        padding: EdgeInsets.only(top: 30),
        child: Column(children: [Expanded(child: BarChartWidget())]),
      ),
    );
      }

     @override
     Widget build(BuildContext context) {
    final controller = PageController();
    final height = MediaQuery.of(context).size.height;
    final width = MediaQuery.of(context).size.width;

    final appbarHeight = 200.0;
    final statusBarHeight = MediaQuery.of(context).padding.top;

    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      drawer: drawer(),
      body: CustomScrollView(
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            elevation: 10,
            title: TitleWidget(25),
            actions: <Widget>[
              IconButton(
                  icon: Icon(Icons.account_balance_wallet),
                  onPressed: () {
                    Navigator.of(context).push(
                        MaterialPageRoute(builder: (context) => CoinView()));
                  }),
            ],
            expandedHeight: 300,
            floating: true,
            flexibleSpace: FlexibleSpaceBar(
              background: Container(
                  alignment: Alignment.bottomCenter,
                  padding: EdgeInsets.only(top: statusBarHeight + 50),
                  child: Column(children: [BalanceWidget(), CoinWidget()])),
            ),
          ),
          SliverList(
            delegate: SliverChildListDelegate(
              [
                Container(
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.only(
                          topLeft: Radius.circular(20),
                          topRight: Radius.circular(20))),
                  height: height - 50,
                  width: MediaQuery.of(context).size.width,
                  alignment: Alignment.center,
                  child: Column(
                    children: [
                      Expanded(
                          child: PageView(
                        children: <Widget>[
                          pageOne(),
                          pageTwo(),
                          pageTwo(),
                          pageTwo()
                        ],
                      )),
                      Padding(
                        padding: EdgeInsets.symmetric(vertical: 15),
                        child: SmoothPageIndicator(
                          controller: controller,
                          count: 4,
                          effect: ExpandingDotsEffect(
                              dotHeight: 5,
                              dotWidth: 15,
                              expansionFactor: 3,
                              activeDotColor: Theme.of(context).primaryColor),
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

标签： flutter

解决方案

这里的问题是 SliverAppBar 不在您的 SliverList 之下，而是在它之上。

这意味着这两个条子中没有重叠，这就是为什么看起来底部正在剪裁 SliverAppBar 而实际上是 SliverAppBar 收缩。

如果您希望 SliverList 的效果跨越灵活空间，您可以使用 Stack。您将 SliverAppBar 的内容放在后台，然后将 CustomScrollView 放在它上面。

不要忘记在 CustomScrollView 的 SliverAppBar 中添加一个高度为 300 的空容器，以作为现在在后台的内容的“窗口”。

我希望你能用这个来解决你的问题！

推荐阅读