AppBar滚动视图行为是指在使用滚动视图(如ListView、ScrollView)时,AppBar的显示和隐藏效果。以下是一个简单的示例代码:
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'AppBar滚动视图行为示例',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('AppBar滚动视图行为示例'),
),
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 200,
flexibleSpace: FlexibleSpaceBar(
title: Text('FlexibleSpaceBar'),
background: Image.network(
'https://example.com/image.jpg',
fit: BoxFit.cover,
),
),
),
SliverList(
delegate: SliverChildBuilderDelegate(
(BuildContext context, int index) {
return ListTile(
title: Text('Item $index'),
);
},
childCount: 100,
),
),
],
),
),
);
}
}
在这个示例中,我们使用了CustomScrollView
来创建滚动视图。其中,SliverAppBar
是AppBar的滚动视图行为部分。通过设置expandedHeight
来定义AppBar在展开时的高度,通过flexibleSpace
来设置AppBar的背景和标题。在这个示例中,我们使用了FlexibleSpaceBar
来实现一个带有背景图片和标题的AppBar。
SliverList
是一个滚动视图的子部件,用于展示列表。在这个示例中,我们使用了SliverChildBuilderDelegate
来动态生成列表项。
通过以上代码,你可以在Flutter中实现一个带有滚动视图行为的AppBar。