【问题标题】:How to move title on Appbar when scrolling滚动时如何在Appbar上移动标题
【发布时间】:2019-08-23 08:09:26
【问题描述】:

我想制作 Flutter 应用。

如何在滚动时在appbar上制作移动标题??

我在 GIF 文件上附加了应用的状态。

我需要在哪里设置移动标题文本?

我只是制作类似于优步应用的应用

 @override
  Widget build(BuildContext context) {
    double sliderValue = 0.0;
    return Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverOverlapAbsorber(
              handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
              child: SliverAppBar(
                forceElevated: innerBoxIsScrolled ,
                backgroundColor: Colors.transparent,
                leading: IconButton(
                  onPressed: () {
                    Navigator.pop(context);
                  },
                  icon: Icon(Icons.arrow_back),
                  color: Colors.black,
                ),
                elevation: 0.0,
                expandedHeight: 100.0,
                floating: false,
                pinned: true,
                flexibleSpace: FlexibleSpaceBar(
                    titlePadding: EdgeInsets.only(left: 15.0),
                    collapseMode: CollapseMode.none,
                    title: Text("Notification",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 20.0,
                        )),
                  ),

              ),
            ),
          ];
        },
        body: Center(
          child: Text("Sample Text"),
        ),
      ),
    );
  }

【问题讨论】:

  • 使用过silver Widgets。谷歌SilverAppBar
  • 我已经用过了。但是,我什么也做不了。在我看来,我必须设置“Flexible_space_bar.dart”文件。那么,你能再帮我一次吗?
  • 颤振链接 SilverAppBar youtube.com/watch?v=R9C5KMJKluE&vl=ko

标签: flutter


【解决方案1】:

必须使用CustomScrollView 小部件

CustomScrollView(
      slivers: <Widget>[
        SliverAppBar(
          title: Text('Title'),
          pinned: true,
          expandedHeight: 48,
        ),
        SliverFillRemaining(
            child: Center(
          child: Text('sliver'),
        )),
      ],
    );

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多