自定义英雄小部件

时间:2020-05-16 07:09:33

标签: flutter animation widget

我有一个Hero小部件,它的子级是Text小部件。当我导航到另一条路线时。 从列表项页面到详细信息页面,我有问题。视频中显示了问题(标题是导航时隐藏的部分)。我要实现的是对标题进行按比例放大过渡。我怎样才能达到这种效果?

https://www.youtube.com/watch?v=BnSeea8LG3s&feature=youtu.be

这是我在登录页面上的代码。

CopyWebpackPlugin

这是我在详细信息页面上的代码。

    Row(
            children: <Widget>[
              Hero(
                tag: "headTitle${widget.item.title}",
                child: Text(
                  "${splitTitle(widget.item.title)[0]} ",
                  style:  GoogleFonts.comfortaaTextTheme().headline1.copyWith(fontSize: 14,fontWeight: FontWeight.bold)
                ),
              ),
              Hero(
                  tag: "tailTitle${widget.item.title}",
                  child: Text(
                    "${splitTitle(widget.item.title)[1]}",
                    style: GoogleFonts.comfortaaTextTheme().headline1.copyWith(fontSize: 14,fontWeight: FontWeight.bold)
                  ))
            ],
          ),

分割标题方法

 Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Hero(
                      tag: "headTitle${widget.item.title}",
                      child: Text("${splitTitle(widget.item.title).first}",
                          style: GoogleFonts.comfortaaTextTheme()
                              .headline1
                              .copyWith(
                                  fontSize: 28, fontWeight: FontWeight.bold)),
                    ),
                    Hero(
                      tag: "tailTitle${widget.item.title}",
                      child: Text("${splitTitle(widget.item.title)[1]}",
                          style: GoogleFonts.comfortaaTextTheme()
                              .headline1
                              .copyWith(
                                  fontSize: 28, fontWeight: FontWeight.bold)),
                    ),
                  ],
                ),

0 个答案:

没有答案