Flutter折叠工具栏功能插件flutter_collapsing_toolbar的使用
Flutter折叠工具栏功能插件flutter_collapsing_toolbar的使用
Flutter Collapsing Toolbar 是一个用于创建浪漫风格折叠工具栏的Flutter包。它对于你的出色应用非常有用。这个小部件被设计为可以独立于任何视图使用，帮助你将其添加到任何复杂的ScrollView或ListView中。
这是一个来自Romantic Project的礼物。更多内容请访问 Romantic Developer。
示例
以下是一个完整的示例代码，展示了如何在Flutter项目中使用flutter_collapsing_toolbar插件：
import 'package:flutter/material.dart';
import 'package:flutter_collapsing_toolbar/flutter_collapsing_toolbar.dart';
void main() => runApp(MyApp());
const kSampleIcons = [
Icons.track_changes_outlined,
Icons.receipt_long_outlined,
Icons.wifi_protected_setup_outlined,
Icons.add_to_home_screen_outlined,
Icons.account_box_outlined,
];
const kSampleIconLabels = [
'Khuyến mãi',
'Lịch sử',
'Chuyển tiền',
'Nạp tiền',
'Tài khoản',
];
class MyApp extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
final controller = ScrollController();
double headerOffset = 0.0;
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Example',
theme: ThemeData(
primarySwatch: Colors.red,
),
home: Scaffold(
body: Container(
margin: const EdgeInsets.only(top: 24.0),
child: Column(
children: [
Align(
alignment: Alignment.topCenter,
child: CollapsingToolbar(
controller: controller,
expandedHeight: 160,
collapsedHeight: 64,
decorationForegroundColor: Color(0xffd90000),
decorationBackgroundColor: Colors.white,
onCollapsing: (double offset) {
setState(() {
headerOffset = offset;
});
},
leading: Container(
margin: EdgeInsets.only(left: 12),
padding: EdgeInsets.all(4),
decoration: ShapeDecoration(
color: Colors.white,
shape: CircleBorder(),
),
child: Icon(
Icons.person,
size: 24,
color: Colors.black38,
),
),
title: Text(
'Romantic Developer',
style: TextStyle(
fontSize: 16,
color: Colors.white,
fontWeight: FontWeight.w600,
),
),
actions: [
ElevatedButton(
onPressed: () {},
style: ButtonStyle(
shape: MaterialStateProperty.all(CircleBorder()),
backgroundColor:
MaterialStateProperty.all(Colors.transparent),
elevation: MaterialStateProperty.all(0.0),
),
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Icon(
Icons.search,
color: Colors.white,
size: 24,
),
),
),
],
featureCount: 5,
featureIconBuilder: (context, index) {
return Icon(
kSampleIcons[index],
size: 54,
color: Colors.white,
);
},
featureLabelBuilder: (context, index) {
return Text(
kSampleIconLabels[index],
textAlign: TextAlign.center,
maxLines: 1,
style: TextStyle(
fontSize: 12,
color: Colors.white,
),
);
},
featureOnPressed: (context, index) {},
),
),
Expanded(
child: Container(
color: Colors.white,
child: SingleChildScrollView(
controller: controller,
child: Column(
children: [
Container(
height: headerOffset,
),
Image.asset('assets/sample.jpg'),
Container(
height: 350,
color: Colors.white,
),
],
),
),
),
),
],
),
),
),
);
}
}
关键点解析
- controller:
ScrollController用于控制滚动行为。 - headerOffset: 记录头部偏移量，用于响应折叠事件。
- CollapsingToolbar:
expandedHeight: 展开状态下的高度。collapsedHeight: 折叠状态下的高度。decorationForegroundColor: 装饰前景色。decorationBackgroundColor: 装饰背景色。onCollapsing: 当工具栏开始折叠时触发的回调函数。leading: 工具栏左侧的控件。title: 工具栏标题。actions: 工具栏右侧的操作按钮。featureCount: 特性数量。featureIconBuilder: 构建特性图标的方法。featureLabelBuilder: 构建特性标签的方法。featureOnPressed: 特性点击事件处理方法。
开发环境
以下是用于开发此项目的Flutter和相关工具的版本信息：
[✓] Flutter (Channel stable, 2.0.5, on macOS 11.2.3 20D91 darwin-x64, locale en-VN)
• Flutter version 2.0.5
• Framework revision adc687823a (11 days ago), 2021-04-16 09:40:20 -0700
• Engine revision b09f014e96
• Dart version 2.12.3
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.3)
• Platform android-30, build-tools 30.0.3
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS
• Xcode at /Applications/Xcode_12.app/Contents/Developer
• Xcode 12.4, Build version 12D4e
• CocoaPods version 1.10.1
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.1)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6915495)
通过以上内容，你可以了解并快速上手使用flutter_collapsing_toolbar插件来实现折叠工具栏效果。希望这对你有所帮助！
更多关于Flutter折叠工具栏功能插件flutter_collapsing_toolbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter折叠工具栏功能插件flutter_collapsing_toolbar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，以下是一个关于如何使用 flutter_collapsing_toolbar 插件的示例代码。这个插件可以帮助你实现折叠工具栏效果，通常用于实现类似 Google News 或 Google Keep 应用中的折叠工具栏布局。
首先，你需要在你的 pubspec.yaml 文件中添加依赖：
dependencies:
flutter:
sdk: flutter
flutter_collapsing_toolbar: ^x.y.z # 请替换为最新版本号
然后运行 flutter pub get 来获取依赖。
接下来，在你的 Dart 文件中，你可以这样使用 flutter_collapsing_toolbar 插件：
import 'package:flutter/material.dart';
import 'package:flutter_collapsing_toolbar/flutter_collapsing_toolbar.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Collapsing Toolbar Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: PreferredSize(
preferredSize: Size.fromHeight(200.0), // 设置初始高度
child: CollapsingToolbar(
title: Text('Collapsing Toolbar Demo'),
expandedTitleColor: Colors.white,
collapsedTitleColor: Colors.black,
backgroundColor: Colors.blue,
image: NetworkImage('https://via.placeholder.com/800x400'), // 替换为你的图片URL
actions: <Widget>[
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
),
],
contentPadding: EdgeInsets.only(bottom: 56.0),
onExpanded: () {
print('Toolbar expanded');
},
onCollapsed: () {
print('Toolbar collapsed');
},
),
),
body: Center(
child: ListView.builder(
itemCount: 20,
itemBuilder: (context, index) {
return ListTile(
title: Text('Item $index'),
);
},
),
),
),
);
}
}
代码解释：
-
依赖导入：
- 导入
flutter/material.dart和flutter_collapsing_toolbar/flutter_collapsing_toolbar.dart。
- 导入
-
应用入口：
MyApp类是应用的入口，它创建了一个MaterialApp。
-
首页布局：
Scaffold的appBar属性使用了PreferredSize包裹的CollapsingToolbar。CollapsingToolbar的title属性设置标题，expandedTitleColor和collapsedTitleColor分别设置展开和折叠状态下的标题颜色。backgroundColor设置工具栏的背景颜色。image属性设置背景图片，这里使用了网络图片，你可以替换为本地图片。actions属性添加了一些操作按钮，例如搜索和更多选项。contentPadding设置内容内边距，确保工具栏不会覆盖内容。onExpanded和onCollapsed是工具栏展开和折叠时的回调。
-
内容部分：
body部分使用ListView.builder构建一个简单的列表。
这段代码展示了如何使用 flutter_collapsing_toolbar 插件来实现一个带有折叠工具栏的页面。你可以根据需要进一步自定义和扩展这个示例。
