Question

我有一些带有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
          ],
        ));
  }
}

Answer 1

我认为您需要复制 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,
              ),
            ),
          ),

我建议删除整个 Transform 小部件。相反，请使用 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中进行设置。

在展开的FlexibleSpaceBar中包裹文字

1 个答案: