Question

我正努力使电子商务应用程序风起云涌。我想使Appbar透明并具有动画效果，所以我使用Sliverappbar，但是如果不向下滚动就无法使其透明。

我尝试使用堆栈，但是它不起作用并且有错误。我希望应用程序栏位于顶部时透明，而当我向下滚动时更改为白色。

这是我的颤动代码

class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
      appBar: AppBar(
        backgroundColor: Colors.transparent,
        elevation: 0.0,
        leading: Icon(
          Icons.menu,
          size: 30,
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.tune, color: Colors.black, size: 30),
          )
        ],
      ),
      body: _buildBody(),
    );
  }

  Widget _buildBody() {
    return CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          leading: Icon(
            Icons.menu,
            size: 30,
          ),
          backgroundColor: Colors.transparent,
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.tune,
                color: Colors.black,
                size: 30,
              ),
            )
          ],
          floating: true,
          elevation: 0.0,
          snap: false,
        ),
        SliverToBoxAdapter(
          child: SizedBox(
              height: MediaQuery.of(context).size.height * 0.7,
              width: MediaQuery.of(context).size.width,
              child: Carousel(
                images: [
                  Image.network(
                      'https://i.pinimg.com/564x/83/32/37/8332374f18162612dd9f2a4af2fda794.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://i.pinimg.com/originals/e2/8e/50/e28e5090b7193ec9b2d5b5c6dfaf501c.jpg',
                      fit: BoxFit.cover),
                  Image.network(
                      'https://image-cdn.hypb.st/https%3A%2F%2Fhypebeast.com%2Fwp-content%2Fblogs.dir%2F6%2Ffiles%2F2019%2F09%2Fmschf-fall-winter-lookbook-streetwear-seoul-korea-47.jpg?q=75&w=800&cbr=1&fit=max',
                      fit: BoxFit.cover)
                ],
                showIndicator: false,
              )),
        ),
        SliverToBoxAdapter(
          child: Padding(
            padding: EdgeInsets.only(
                left: 25.0, top: 20.0, right: 0.0, bottom: 20.0),
            child: Text('Recommended for You',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 25)),
          ),
        ),
        SliverPadding(
            padding: EdgeInsets.only(left: 35.0, right: 35.0),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                mainAxisSpacing: 20.0,
                crossAxisSpacing: 25.0,
                childAspectRatio: 0.67,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return _buildListItem(context, index);
                },
                childCount: 13,
              ),
            ))
      ],
    );

Answer 1

我能找到的最佳解决方案是，在SliverToBoxAdapter中使用常规AppBar而不是使用SliverAppBar。您可以将“ FlexibleSpace”属性设置为“轮播”，或者将AppBar和轮播放入“堆栈”中。

据我所知，flexibleSpace属性在SliverAppBar和常规AppBar中的行为有所不同。它不会在常规的AppBar中崩溃，您也不需要将轮播放到FlexibleSpaceBar（）中。

您可能需要做一些其他事情才能获得想要的外观（例如，更改高程）。

如何在颤动中制作透明的sliverappbar？

1 个答案: