怎么吧sliverappbar在压缩的时候对文本进行裁切或者其他效果保证垂直居中

怎么吧sliverappbar在压缩的时候对文本进行裁切或者其他效果保证垂直居中

img

img


slivers:[SliverAppBar.medium(
![img](https://img-mid.csdnimg.cn/release/static/image/mid/ask/203439708676164.png "#left")

        pinned: true,
        titleSpacing: 40,
        toolbarHeight:54,
        collapsedHeight:54,
        expandedHeight:250,
        title:Text('这是一个超长标题这是一个超长标题这是一个超长标题这是一个超长标题这是一个超长标题这是一个超长标题', overflow: TextOverflow.fade,style:TextStyle(height: 1.7,leadingDistribution:TextLeadingDistribution.even,textBaseline: TextBaseline.ideographic, ),),
        //SingleChildScrollView(physics: NeverScrollableScrollPhysics(),reverse: false,padding: const EdgeInsets.fromLTRB(8, 9, 15, 0),child:Text('2022 年 12 月国内市场手机出货量 2786 万部,同比下降16.6%,主要受哪些因素影响?qweertyuiopasdfghjklzxcvbnmqweryuiopasdfghjkl',overflow: TextOverflow.fade,style:TextStyle(height: 1.55,),),),
        leading: BackButton(),
        actions: [IconButton(icon: Icon(Icons.more_vert),onPressed: (){showModalBottomSheet(
        context: context,
          backgroundColor: kDefaultIconLightColor,
        builder: (BuildContext context) {
          return SizedBox(
            height: 200,
            child: ListView(
                scrollDirection: Axis.horizontal,
                physics: const NeverScrollableScrollPhysics(),
                children: buttonList,
            ),
          );
          },
          );
          },
          ),
      ],
      ),

img

方案来自 梦想橡皮擦 狂飙组基于 GPT 编写的 “程秘”


  • 在使用 SliverAppBar 组件时,如果需要在滚动时对标题文本进行裁剪或者其他垂直居中的效果,可以结合使用 FlexibleSpaceBar 组件和 ClipRect 组件来实现。

  • 首先,在 SliverAppBar 中,设置 flexibleSpace 属性为 FlexibleSpaceBar 组件。然后,在 FlexibleSpaceBar 组件中,设置 title 属性为一个 ClipRect 组件,用于对文本进行裁剪。在 ClipRect 组件中,可以设置 child 属性为一个 Text 组件或其他需要进行裁剪的组件。

  • 下面是一个示例代码,其中将标题文本裁剪为一个圆形:

SliverAppBar(
  expandedHeight: 200.0,
  flexibleSpace: FlexibleSpaceBar(
    title: ClipRect(
      child: Align(
        alignment: Alignment.center,
        heightFactor: 0.5,
        child: Text(
          'My Title',
          style: TextStyle(fontSize: 20.0),
        ),
      ),
    ),
    background: Image.asset(
      'images/header.jpg',
      fit: BoxFit.cover,
    ),
  ),
);

在上面的代码中,ClipRect 组件的 heightFactor 属性设置为 0.5,表示只显示 child 组件的上半部分。同时,Align 组件的 alignment 属性设置为 Alignment.center,表示将 child 组件在垂直方向上居中对齐。最后,Text 组件的 style 属性设置了一个字体大小为 20.0。

通过上述代码,可以在 SliverAppBar 中实现对标题文本进行裁剪和垂直居中的效果。可以根据实际需求,对 ClipRect 和 Text 组件的属性进行调整,以达到更好的效果。