3

SliverAppBar我正在尝试使用 Hero 小部件向颤动添加动画。

我在FlexibleSpaceBarSliverAppBar 中显示时间，并且我已经设计了它，当用户向下滚动时，原始AppBar标题小部件**（当前为一列）** 被替换为内部存在的小部件FlexibleSpaceBar（也是一列）。

我已将两个列小部件都包含在其中，Hero但更改不是动画的。 在此处输入图像描述

class _MyHomePageState extends State<MyHomePage> {

  static DateTime time = DateTime.now();
  static String formattedDate = DateFormat('EEE d MMM').format(time);
  static String formattedTime = DateFormat.jm().format(time);


  Widget appBarTitle = Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: <Widget>[
      Text(formattedDate, style: TextStyle(fontSize: 16.0),),
      Text('20 Shawal 1441 AH', style: TextStyle(fontSize: 12.0),),
    ],
  );
  Widget appBarTitleCollapsed = Hero(
    tag: 'time',
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Text('Dhuhr', style: TextStyle(fontSize: 12.0),),
        Text(formattedTime, style: TextStyle(fontSize: 18.0),),
      ],
    ),
  );
  double appBarHeight = 200.0;

  bool lastStatus = true;
  @override
  void initState() {

    super.initState();
  }
  @override
  Widget build(BuildContext context) {

    return SafeArea(
      child: Scaffold(
        body: CustomScrollView(
          slivers: <Widget>[
            SliverAppBar(
              title: appBarHeight == 200 ? appBarTitle: appBarTitleCollapsed,
                pinned: true,
              expandedHeight: 200.0,
              flexibleSpace: LayoutBuilder(
                builder: (BuildContext context, BoxConstraints constraints){
                  WidgetsBinding.instance.addPostFrameCallback((_) => setState(() {
                    appBarHeight = constraints.biggest.height;
                  }));

                  return appBarHeight > 140.0 ? FlexibleSpaceBar(
                    centerTitle: true,
                    title: Container(
                      height: 130.0,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.end,
                        children: <Widget>[
                          Hero(
                            tag: 'time',
                            child: Column(
                              children: <Widget>[
                                Text('Dhuhr', style: TextStyle(fontSize: 12.0),),
                                Text(formattedTime, style: TextStyle(fontSize: 18.0),),
                              ],
                            ),
                          ),
                          Text('Now', style: TextStyle(fontSize: 12.0),)
                        ],
                      ),
                    ),
                    background: Stack(
                      fit: StackFit.expand,
                      children: <Widget>[
                        Image.asset('Assets/mosque.jpg', fit: BoxFit.cover,),
                        Container(

                          decoration: BoxDecoration(
                              gradient: LinearGradient(
                                  colors: [Colors.greenAccent.withOpacity(.6), Colors.green[900].withOpacity(.6)]
                              )
                          ),
                        )
                      ],
                    ),
                  ) : FlexibleSpaceBar(
                    title: Text(''),
                  );
                },
              )
            ),
            SliverList(
              delegate: SliverChildBuilderDelegate(
                  (BuildContext context, int index){

                    return Container(child: Text('$index'),);
                  },
                childCount: 200,
              ),
            )
          ],
        ),

        ),
    );
  }
}
4

0 回答 0