英文:
Cannot properly hide the appbar title on scroll in flutter
问题
我想在滚动时隐藏AppBar。搜索图标已正确隐藏，滚动时不透明度也减小。但是对于标题，它不起作用。
如下所示，当我向下滚动时，搜索按钮的不透明度逐渐降低，但标题没有。
我尝试使用preferred height、动画控制器，但情况变得更糟。
import 'package:flutter/material.dart';
import 'package:vet_mobile/screens/chat.dart';
import 'package:vet_mobile/screens/logot.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'WhatsApp',
style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.search,
color: Theme.of(context).textTheme.bodyLarge!.color,
),
),
],
),
pinned: true,
floating: true,
elevation: 5,
bottom: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 4,
indicatorColor: Theme.of(context).textTheme.bodyLarge!.color,
labelStyle:
TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
labelColor: Theme.of(context).textTheme.bodyLarge!.color,
unselectedLabelColor:
Theme.of(context).textTheme.bodySmall!.color,
dividerColor: Colors.transparent,
tabs: const [
Tab(text: 'CHATS'),
Tab(text: 'STATUS'),
Tab(text: 'CALLS'),
],
),
),
];
},
body: const TabBarView(
children: [
Center(child: LogoutScreen()),
Center(child: ChatScreen()),
Center(child: Text('Patient')),
],
),
),
),
);
}
}
如您所见，搜索按钮的不透明度在滚动时逐渐减小，但标题不会。
我尝试使用preferred height、动画控制器，但情况变得更糟。
英文:
I want to hide the AppBar on scroll. The search icon is hidden properly and also the opacity decreases on scroll. But for the title, it is not working.
import 'package:flutter/material.dart';
import 'package:vet_mobile/screens/chat.dart';
import 'package:vet_mobile/screens/logot.dart';
class HomeScreen extends StatelessWidget {
const HomeScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: 3,
child: Scaffold(
body: NestedScrollView(
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return <Widget>[
SliverAppBar(
title: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(
'WhatsApp',
style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color,
),
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.search,
color: Theme.of(context).textTheme.bodyLarge!.color,
),
),
],
),
pinned: true,
floating: true,
elevation: 5,
bottom: TabBar(
indicatorSize: TabBarIndicatorSize.tab,
indicatorWeight: 4,
indicatorColor: Theme.of(context).textTheme.bodyLarge!.color,
labelStyle:
TextStyle(fontSize: 13, fontWeight: FontWeight.w600),
labelColor: Theme.of(context).textTheme.bodyLarge!.color,
unselectedLabelColor:
Theme.of(context).textTheme.bodySmall!.color,
dividerColor: Colors.transparent,
tabs: const [
Tab(text: 'CHATS'),
Tab(text: 'STATUS'),
Tab(text: 'CALLS'),
],
),
),
];
},
body: const TabBarView(
children: [
Center(child: LogoutScreen()),
Center(child: ChatScreen()),
Center(child: Text('Patient')),
],
),
),
),
);
}
}
As we can see the opacity of the search button decreases slowly as I scroll down but not for the title.
I tried using the preferred height, animation controller, but it messed up more.
答案1
得分: 1
似乎在设置自定义样式时，此效果不起作用。 从这里删除固定样式设置：
```dart
Text(
'PawCare',
// remove this
/*style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color,
),*/
),
要设置标题文本的样式，请使用SliverAppBar的titleTextStyle配置：
SliverAppBar(
titleTextStyle: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color),
...
<details>
<summary>英文:</summary>
Seems that this effect does not work when you set a custom style. Remove the fixed style setting from here:
Text(
'PawCare',
// remove this
/style: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color,
),/
),
To set the style of the title text, use the `titleTextStyle` configuration of `SliverAppBar`:
SliverAppBar(
titleTextStyle: TextStyle(
color: Theme.of(context).textTheme.bodyLarge!.color),
...
</details>
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论