flutter - 在展开的 FlexibleSpaceBar 内换行

Question

我有一些带有 FlexibleSpaceBar 的屏幕来显示大文本，向下滚动时会缩小。FlexibleSpaceBar 处于展开状态时如何换行？

问题视频： 乐视频

相关代码

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
          ],
        ));
  }
}

标签： flutterdartfrontendflutter-layout

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
        );

并且不要在标题的 Text 小部件中设置fontSize 。在ThemeData.primaryTextTheme.title中设置它或直接在修改过的 FlexibleSpaceBar 中设置。