如何应对SliverAppBar的flexibleSpace内部的抖动?

时间:2020-08-14 07:24:18

标签: flutter dart flutter-layout

我有在CustomScroll视图中滚动的SliverAppBar,我意识到一旦添加文本并开始滚动SliverAppBar的底部,便开始溢出。

我想要的行为是,当我开始滚动Sliver App Bar时,也必须立即开始滚动,以确保没有溢出。 (应用栏和标签栏之间的距离必须始终保持不变)

正如您在赠予中所看到的那样,一旦我开始滚动文本,就会溢出。 Here是我的意思。

构建方法:

      @override
  Widget build(BuildContext context) {
    return Scaffold(
      resizeToAvoidBottomPadding: false,
      body: NestedScrollView(
        controller: _scrollViewController,
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              backgroundColor: Colors.green,
              pinned: true,
              floating: true,
              expandedHeight: 400,
              forceElevated: boxIsScrolled,
              flexibleSpace: Column(
                children: <Widget>[
                  Stack(
                    alignment: Alignment.center,
                    overflow: Overflow.visible,
                    children: <Widget>[
                      Image(
                        fit: BoxFit.cover,
                        height: MediaQuery.of(context).size.height / 4,
                        width: MediaQuery.of(context).size.width,
                        image: NetworkImage(
                            'https://image.freepik.com/free-photo/soccer-field-spotlight-background-stadium_46250-1363.jpg'),
                      ),
                      Positioned(
                        width: MediaQuery.of(context).size.width,
                        bottom: -75,
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          children: <Widget>[
                            Padding(
                              padding: const EdgeInsets.only(top: 45),
                              child: Text.rich(
                                TextSpan(
                                  children: <TextSpan>[
                                    TextSpan(
                                      text: '22K',
                                      style: TextStyle(
                                          fontSize: 20,
                                          color: Colors.black87,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    TextSpan(text: '\n'),
                                    TextSpan(
                                      text: 'Connections',
                                      style: TextStyle(color: Colors.black87),
                                    ),
                                  ],
                                ),
                                textAlign: TextAlign.center,
                                style: DefaultTextStyle.of(context).style,
                              ),
                            ),
                            ClipRRect(
                              borderRadius: BorderRadius.circular(40),
                              child: Image(
                                width: 130,
                                height: 130,
                                image: NetworkImage(
                                  'https://lookyourbestbeyourbest.files.wordpress.com/2011/11/image-3.jpeg',
                                ),
                              ),
                            ),
                            Padding(
                              padding: const EdgeInsets.only(top: 45),
                              child: Text.rich(
                                TextSpan(
                                  children: <TextSpan>[
                                    TextSpan(
                                      text: '12K',
                                      style: TextStyle(
                                          fontSize: 20,
                                          color: Colors.black87,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    TextSpan(text: '\n'),
                                    TextSpan(
                                      text: 'Connections',
                                      style: TextStyle(color: Colors.black87),
                                    ),
                                  ],
                                ),
                                textAlign: TextAlign.center,
                                style: DefaultTextStyle.of(context).style,
                              ),
                            ),
                          ],
                        ),
                      ),
                    ],
                  ),
                  SizedBox(
                    height: 85,
                  ),
                  Container(
                    child: RichText(
                      text: TextSpan(
                        text: 'John Dory',
                        style: TextStyle(
                          color: Colors.black,
                          fontWeight: FontWeight.bold,
                          fontSize: 20,
                        ),
                      ),
                    ),
                  ),
                ],
              ),
              bottom: TabBar(
                tabs: <Widget>[
                  Tab(
                    text: "Home",
                    icon: Icon(Icons.home),
                  ),
                  Tab(
                    text: "Example page",
                    icon: Icon(Icons.help),
                  )
                ],
                controller: _tabController,
              ),
            )
          ];
        },
        body: TabBarView(
          children: <Widget>[
            PageOne(),
            PageTwo(),
          ],
          controller: _tabController,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(Icons.control_point),
        onPressed: () {
          _tabController.animateTo(1,
              curve: Curves.bounceInOut, duration: Duration(milliseconds: 10));

      
          _scrollViewController
              .jumpTo(_scrollViewController.position.maxScrollExtent);
        },
      ),
    );
  }
}

对不起,这么多代码。 谢谢

0 个答案:

没有答案