Question

我希望能够在用户向上滚动时将设置标题（位于灵活的空格栏中）移到中间。我怎样才能做到这一点？

滚动时，我已经链接了当前屏幕的视频。如您所见，当用户向上滚动时，设置标题会移到左侧而不是中心。

这是我在屏幕上的代码（并非所有代码都只是相关的部分）：

 @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: <Widget>[
          SliverAppBar(
            title: Row(
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Container(
                      margin: EdgeInsets.fromLTRB(0, 0, 0, 0),
                      child: IconButton(
                          onPressed: () => 
                         Navigator.pop(context),
                          //controller.toggle();
                          icon: Image.asset('assets/UI/menu.png')),
                    ),
                  ],
                )
              ],
            ),
            expandedHeight: 145.0,
            backgroundColor: Colors.white,
            //floating: true,
            pinned: true,
            elevation: 0.0,
            flexibleSpace: FlexibleSpaceBar(
              title: Row(
                children: <Widget>[

                  Container(
                      padding: EdgeInsets.fromLTRB(80, 0, 0, 0),
                      child: Text(
                        'Settings',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                            color: Colors.black,
                            fontFamily: 'AvenirNext',
                            fontWeight: FontWeight.w600,
                            fontSize: 22.0),
                      )),
                ],
              ),
              background: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      padding: EdgeInsets.fromLTRB(20, 40, 32, 0),
                      child: Text(
                        'Change Settings',
                        textAlign: TextAlign.left,
                        style: TextStyle(
                            color: Colors.black54,
                            fontFamily: 'AvenirNext',
                            fontWeight: FontWeight.w300,
                            fontSize: 16.0),
                      )),
                ],
              ),
            ),
          ),

Answer 1

我试图测试您的代码，但是没有用。但是，您可以尝试替换此部分：

title: Container(
padding: EdgeInsets.fromLTRB(80, 0, 0, 0),
child: Text(
  'Settings',
  textAlign: TextAlign.center,
  style: TextStyle(
      color: Colors.black,
      fontFamily: 'AvenirNext',
      fontWeight: FontWeight.w600,
      fontSize: 22.0),
)),

如何将FlexibleSpaceBar移动到SliverAppbar滚动的中心

1 个答案: