防止 SliverAppBar 标题在 Flutter 中收缩时换行答案

【问题标题】：Prevent SliverAppBar title from wrapping while it shrinks in Flutter防止 SliverAppBar 标题在 Flutter 中收缩时换行
【发布时间】：2020-12-02 03:29:24
【问题描述】：

我有一个在 CustomScrollView 中使用 SliverAppBar 的 Flutter 应用程序。 SliverAppBar 的标题真的很长，所以随着 AppBar 在滚动时压缩，标题开始换行。

我想在不使用溢出的情况下防止这种行为。
请注意，标题可以只是“滑出”，而不是固定在顶部。

这允许一些可能性，例如：

缩小标题，但不改变换行
保持标题大小不变，完全防止其换行

GIF：

代码：

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Scaffold(
          body: CustomScrollView(
            slivers: <Widget>[
              SliverAppBar(
                expandedHeight: 300,
                flexibleSpace: FlexibleSpaceBar(
                  background: Image.network(
                    'https://picsum.photos/500?grayscale&blur=2',
                    fit: BoxFit.cover,
                  ),
                  titlePadding: EdgeInsets.all(16),
                  title: Text(
                      'This is a very long title that will wrap several times while it shrinks'),
                ),
              ),
              SliverToBoxAdapter(
                child: Text(
                  '\nScrollable body:\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.\nUt enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.\nDuis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
                  style: TextStyle(fontSize: 30),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

您可以使用 SizedBox 包裹在 FittedBox 中：

title: FittedBox(
  child: SizedBox(
    width: MediaQuery.of(context).size.width,
    child: Center(
      child: Text(
        'This is a very long title that will wrap several times while it shrinks',
        style: TextStyle(fontSize: 30),
      ),
    ),
  ),
),

结果：

【讨论】：

除了上述答案之外，对于那些想要完全避免缩小的人：将SliverAppBar 的toolbarHeight 属性设置为更大的值，例如。 110。这样标题就会在它有机会开始缩小之前淡出。