我有一些带有FlexibleSpaceBar的屏幕来显示大文本,向下滚动时会缩小。 FlexibleSpaceBar处于展开状态时,如何包装文本?
问题的视频:
Le video
相关代码
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
class SelectPage extends StatelessWidget {
final String title;
final Widget child;
const SelectPage({Key key, @required this.title, this.child}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
shrinkWrap: true,
scrollDirection: Axis.vertical,
slivers: <Widget>[
SliverAppBar(
brightness: Brightness.light,
iconTheme: Theme.of(context).iconTheme,
flexibleSpace: FlexibleSpaceBar(
title: Text(
title,
style: TextStyle(fontSize: 20, color: Theme.of(context).textTheme.title.color),
maxLines: 10,
softWrap: true,
),
centerTitle: true,
),
expandedHeight: 200,
backgroundColor: Colors.white,
floating: true,
),
this.child
],
));
}
}
最佳答案
我认为您需要复制FlexibleSpaceBar并稍微修改其构建功能。
默认情况下,FlexibleSpaceBar使用比例变换来动画标题的大小:
children.add(Container(
padding: padding,
// Here comes scale transform
child: Transform(
alignment: titleAlignment,
transform: scaleTransform,
child: Align(
alignment: titleAlignment,
child: DefaultTextStyle(
style: titleStyle,
child: title,
),
),
),
我建议删除整个“变换”小部件。相反,采用scaleValue变量,并在titleStyle中使用它,如下所示:
final double scaleValue = Tween<double>(begin: 1.5, end: 1.0).transform(t);
TextStyle titleStyle = theme.primaryTextTheme.title;
titleStyle = titleStyle.copyWith(
color: titleStyle.color.withOpacity(opacity),
fontSize: titleStyle.fontSize * scaleValue
);
并且不要在标题的“文本”小部件中设置fontSize。在ThemeData.primaryTextTheme.title中进行设置,或直接在经过修改的FlexibleSpaceBar中进行设置。