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

debugcn 发表于 Dev

丹尼

我有一个Flutter应用程序，该应用程序在CustomScrollView中使用SliverAppBar。SliverAppBar的标题确实很长，因此当AppBar在滚动时压缩时，标题开始包装多次。

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

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

缩小标题，但不更改其环绕
保持标题大小相同，从而防止其完全包裹

GIF：

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

莫比纳

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

结果：