SliverAppBar
是 Flutter 中的一个组件,通常用于实现可滚动的应用栏,而 TabBar
则用于在应用栏中显示标签页。将这两者结合使用,可以创建一个带有标签页的可滚动应用栏,这在很多应用中都非常常见,比如新闻应用、社交媒体应用等。
CustomScrollView
中的一个组件,它可以随着滚动而改变高度,通常用于实现 Material Design 中的可滚动应用栏。CustomScrollView
:这是包含 SliverAppBar
和其他滚动内容的容器。SliverAppBar
:在 CustomScrollView
中添加 SliverAppBar
,并设置其属性。SliverAppBar
中添加 TabBar
:使用 TabBar
组件来显示标签页。import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
body: MyHomePage(),
),
);
}
}
class MyHomePage extends StatelessWidget {
final List<String> _tabs = ['Tab 1', 'Tab 2', 'Tab 3'];
@override
Widget build(BuildContext context) {
return DefaultTabController(
length: _tabs.length,
child: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200.0,
pinned: true,
flexibleSpace: FlexibleSpaceBar(
title: Text('My App'),
background: Image.asset('assets/image.jpg', fit: BoxFit.cover),
),
bottom: TabBar(
tabs: _tabs.map((tab) => Tab(text: tab)).toList(),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(context, index) {
return ListTile(title: Text('Item $index'));
},
childCount: 100,
),
),
],
),
);
}
}
TabBar
标签页不显示:确保 TabBar
已经正确添加到 SliverAppBar
的 bottom
属性中,并且 DefaultTabController
的 length
属性与 TabBar
的 tabs
属性长度一致。SliverAppBar
不随滚动变化:检查 SliverAppBar
的 pinned
属性是否设置为 true
,如果设置为 false
,则 SliverAppBar
不会固定在顶部。SliverAppBar
背景图片不显示:确保背景图片的路径正确,并且图片格式支持。领取专属 10元无门槛券
手把手带您无忧上云