Sliver Appbar [Collapsing Toolbar] 在 Flutter 中从左到中心动画标题 [英] Sliver Appbar [Collapsing Toolbar] animate title from left to center in Flutter

问题描述

这是我用于折叠工具栏的构建方法:-

 @override小部件构建(BuildContext 上下文){返回安全区域(孩子:自定义滚动视图(控制器:控制器，条子:<小部件>[SliverAppBar(固定:真实，扩展高度:appBarHeight，领先:图标按钮(图标:图标(Icons.arrow_back_ios，颜色:Colors.black，),onPressed: () =>空值，),浮动:真实，弹性空间:弹性空间条(titlePadding: E​​dgeInsets.only(left:leftV , bottom:bottomV ),标题:文字(标题 "，样式:文本样式(颜色:Colors.black，字体大小:16.0，),),),),SliverList(委托:SliverChildBuilderDelegate((BuildContext context, int index) {return ListTile(title: Text("Flutter/$index"));}))],),);}

根据文档，我得到了删除填充的解决方案:-

<块引用>

///默认情况下，该属性的值为///EdgeInsetsDirectional.only(start: 72, bottom: 16) 如果标题是///不居中，EdgeInsetsDirectional.only(start 0, bottom: 16) 否则.final EdgeInsetsGeometry titlePadding;

但我得到的输出为:-

我想在应用栏完全折叠时将标题居中.

问题也已在 github 中提交

Here is my Build method for collapsing toolbar:-

     @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CustomScrollView(
        controller: controller,
        slivers: <Widget>[
          SliverAppBar(
            pinned: true,
            expandedHeight: appBarHeight,
            leading: IconButton(
              icon: Icon(
                Icons.arrow_back_ios,
                color: Colors.black,
              ),
              onPressed: () => null,
            ),
            floating: true,
            flexibleSpace: FlexibleSpaceBar(

          titlePadding: EdgeInsets.only(left:leftV , bottom:bottomV ),
          title: Text(
            "Title ",
            style: TextStyle(
              color: Colors.black,
              fontSize: 16.0,
            ),
          ),
        ),
      ),
      SliverList(delegate:
          SliverChildBuilderDelegate((BuildContext context, int index) {
        return ListTile(title: Text("Flutter / $index"));
      }))
    ],
  ),
);
}

As per the doc I got solution to remove padding :-

/// By default the value of this property is /// EdgeInsetsDirectional.only(start: 72, bottom: 16) if the title is /// not centered, EdgeInsetsDirectional.only(start 0, bottom: 16) otherwise. final EdgeInsetsGeometry titlePadding;

But I got the output as :-

I want to center the title when the app bar is totally collapsed.

Issue has been filed in github also check here.

解决方案

Found the solution on my own!!!

Add below code to your Sliver App Bar .........

 flexibleSpace: LayoutBuilder(
                builder:
                    (BuildContext context, BoxConstraints constraints) {
                  double percent =
                      ((constraints.maxHeight - kToolbarHeight) *
                          100 /
                          (appBarHeight - kToolbarHeight));
                  double dx = 0;

                  dx = 100 - percent;
                  if (constraints.maxHeight == 100) {
                    dx = 0;
                  }

                  return Stack(
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.only(
                            top: kToolbarHeight / 4, left: 0.0),
                        child: Transform.translate(
                          child: Text(
                            title,
                            style: MyTextStyle.getAppBarTextStyle(
                                screenUtil, appColors),
                          ),
                          offset: Offset(
                              dx, constraints.maxHeight - kToolbarHeight),
                        ),
                      ),
                    ],
                  );
                },
              ),

Percentage is calculated based on the scroll and it animation has been placed accordingly.

这篇关于Sliver Appbar [Collapsing Toolbar] 在 Flutter 中从左到中心动画标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！