如何解决防止SliverAppBar标题在Flutter中收缩时自动换行
我有一个Flutter应用程序,该应用程序在CustomScrollView中使用SliverAppBar。 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),],);
}
}
解决方法
您可以使用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),),
结果:
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。