小编pra*_*rad的帖子

使用 SliverAppBar flutter 设计这个动画

这是我想要构建的,但我能够实现这一目标 输出

通过以下代码,

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled){
          return [
            SliverAppBar(
              expandedHeight: 120,
              floating: false,
              pinned: false,
              flexibleSpace: Container(
                padding: EdgeInsets.all(10),
                height: 160,
                width: double.infinity,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Align(
                        alignment: Alignment.topCenter,
                        child: Text(
                          'Hello World',
                        )),
                    Padding(
                      padding: EdgeInsets.only(top: 16),
                      child: Image.asset(
                        'assets/images/banner.png',
                      ),
                    ),
                  ],
                ),
              ),
            ),
          ];
        },
        body: ListView.builder(),
      ),
    );
  }
Run Code Online (Sandbox Code Playgroud)

我曾尝试使用灵活和扩展的 SliverAppBar,但未能实现。


更新- 列表的第一个元素位于文本字段后面。我只想在动画完成时滚动

列表的第一个元素位于文本字段后面。 我只想在动画完成时滚动

dart flutter flutter-sliver flutter-layout flutter-animation

6
推荐指数
1
解决办法
5068
查看次数