翩翩飞舞的SliverAppBar,折叠背景填充前导空间。

我想使用以下功能创建一个具有 SliverAppBar 以至于当我向上滚动列表时,主体内的图标会缩小到在 leading 空间的appBar。

这里的图片显示了我想要实现的东西。当我向上滚动时,图表应该向上移动并在标题旁边滑动。(类似于Hero widget)

直到现在,我还在尝试 SliverAppBar但未能成功。我很乐意使用其他小工具来实现这个目标。谢谢你。

enter image description here

解决方案:

你有试过这个吗?

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  //Variables needed to adapt FlexibleSpaceBar text color (title)
  ScrollController _scrollController;
  bool lastStatus = true;
  double height = 200;

  void _scrollListener() {
    if (_isShrink != lastStatus) {
      setState(() {
        lastStatus = _isShrink;
      });
    }
  }

  bool get _isShrink {
    return _scrollController.hasClients &&
        _scrollController.offset > (height - kToolbarHeight);
  }

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController()..addListener(_scrollListener);
  }

  @override
  void dispose() {
    _scrollController.removeListener(_scrollListener);
    _scrollController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
          return <Widget>[
            SliverAppBar(
              expandedHeight: height,
              floating: false,
              pinned: true,
              flexibleSpace: FlexibleSpaceBar(
                centerTitle: true,
                title: _isShrink
                    ? Row(
                        children: [
                          //Replace container with your chart
                          // Here you can also use SizedBox in order to define a chart size
                          Container(
                              margin: EdgeInsets.all(10.0),
                              width: 30,
                              height: 30,
                              color: Colors.yellow),
                          Text('A little long title'),
                        ],
                      )
                    : SingleChildScrollView(
                        child: Column(
                            mainAxisAlignment: MainAxisAlignment.end,
                            crossAxisAlignment: CrossAxisAlignment.stretch,
                            children: <Widget>[
                              Text(
                                'A little long title',
                                textAlign: TextAlign.center,
                              ),
                              //Replace container with your chart
                              Container(
                                height: 80,
                                color: Colors.yellow,
                                child: Column(
                                  mainAxisAlignment: MainAxisAlignment.center,
                                  children: <Widget>[
                                    Text('Your chart here'),
                                  ],
                                ),
                              ),
                            ]),
                      ),
              ),
            ),
          ];
        },
        body: ListView.builder(
          itemCount: 100,
          itemBuilder: (context, index) {
            return Container(
              height: 40,
              child: Text(index.toString()),
            );
          },
        ),
      ),
    );
  }
}

solution_gif

给TA打赏
共{{data.count}}人
人已打赏
未分类

Javascript正则检查字符串或整数[重复]。

2022-9-8 11:11:33

未分类

为什么AWS cli被一个bash脚本看到,而另一个看不到?

2022-9-8 11:11:35

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索