防止SliverAppBar标题在Flutter中收缩时自动换行

问题描述

我有一个 Flutter应用程序，该应用程序在CustomScrollView中使用SliverAppBar。 SliverAppBar的标题确实很长，因此当AppBar在滚动时压缩时，标题会自动换行几次。

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

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

缩小标题，但不改变其环绕效果
使标题保持相同大小，以防止标题完全包裹

GIF：

GIF demonstration

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

解决方法

您可以使用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),),

结果：

flutter-layout