Flutter原生界面框架插件native_scaffold的使用
Flutter原生界面框架插件native_scaffold的使用

如何开始❓ 🤔
你可以通过以下命令从命令行添加依赖:
flutter pub add native_scaffold
或者你可以在pubspec.yaml
文件中添加它:
dependencies:
native_scaffold:
有什么不同?
特性 | Scaffold | CustomScaffold |
---|---|---|
提供基本的AppBar和Scaffold功能 | ✅ | ✅ |
使用简单且易于设置 | 👎🏻 | ✅ |
在Android和iOS上提供更好的体验 | 👎🏻 | ✅ |
易于添加滑动动画 | 👎🏻 | ✅ |
允许添加底部浮动栏 | 👎🏻 | ✅ |
可以轻松使用onRefresh 函数 |
👎🏻 | ✅ |
如何使用❓ 🤔
使用它就像创建一个Container
一样简单。不相信?让我展示给你看:
NativeScaffold(
title: "这是简单的",
child: ..., // 主要内容
);
额外参数(可选)
title
: 应用栏或导航栏的标题。action
: 显示在应用栏或导航栏末尾的动作组件。leading
: 显示在应用栏或导航栏开头的组件。child
: 应用栏的主要内容。showLoargeTitleInIOS
: 是否在iOS上显示大标题。仅适用于iOS。sliverAppBarPinned
: 当滚动时是否固定SliverAppBar。仅适用于Android。onRefresh
: 刷新手势触发时调用的函数。sliverAppBarWidget
: 自定义的SliverAppBar组件。仅适用于Android。appBarCenterWidget
: 显示在应用栏中心的组件。sliverAppBarWidgetHeight
: 自定义SliverAppBar的高度。bottomFloatingBar
: 用作底部导航栏的组件。backgroundColor
: 应用栏的背景颜色。appBarEnabled
: 是否启用应用栏。
这是Zenzzen团队为你特别制作的,现在轮到你来打造一款震撼人心的应用了💪
使用此插件制作的一些应用

示例代码
// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors
import 'package:flutter/material.dart';
import 'package:native_scaffold/native_scaffold.dart';
void main() {
runApp(MainApp());
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: true,
),
home: NativeScaffold(
title: "标题",
onRefresh: () async {
await Future.delayed(Duration(seconds: 2));
},
action: IconButton(
icon: Icon(Icons.add),
onPressed: () {},
),
appBarEnabled: true,
backgroundColor: Colors.white,
bottomFloatingBar: SizedBox(
height: double.infinity,
child: Stack(
alignment: Alignment.bottomCenter,
children: [
Container(
height: 50,
width: double.infinity,
color: Colors.red,
),
],
),
),
sliverAppBarWidget: Image.network(
"https://user-images.githubusercontent.com/102783954/235310805-89819d0c-617f-41f8-8795-681cd98faa41.png",
fit: BoxFit.cover,
),
sliverAppBarPinned: true,
sliverAppBarWidgetHeight: 300,
showLoargeTitleInIOS: true,
leading: IconButton(
icon: Icon(Icons.menu),
onPressed: () {},
),
appBarCenterWidget: Text("中心"),
child: Column(
children: [
SizedBox(
height: 2000,
),
],
),
),
);
}
}
更多关于Flutter原生界面框架插件native_scaffold的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter原生界面框架插件native_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是一个关于如何在Flutter项目中使用native_scaffold
插件的示例代码。native_scaffold
插件允许你创建一个更接近原生Android和iOS风格的界面。
首先,确保你已经在你的pubspec.yaml
文件中添加了native_scaffold
依赖:
dependencies:
flutter:
sdk: flutter
native_scaffold: ^x.y.z # 请替换为最新版本号
然后运行flutter pub get
来安装依赖。
以下是一个完整的示例,展示了如何使用native_scaffold
来创建一个具有原生风格的界面:
import 'package:flutter/material.dart';
import 'package:native_scaffold/native_scaffold.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Native Scaffold Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: NativeScaffold(
appBar: AppBar(
title: Text('Native Scaffold Demo'),
),
drawer: Drawer(
child: ListView(
padding: EdgeInsets.zero,
children: <Widget>[
DrawerHeader(
child: Text('Drawer Header'),
decoration: BoxDecoration(
color: Colors.blue,
),
),
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.of(context).pop(); // 关闭抽屉
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
Navigator.of(context).pop(); // 关闭抽屉
},
),
],
),
),
body: Center(
child: Text('Hello, Native Scaffold!'),
),
// 如果在iOS上,你可以使用cupertinoDrawerOptions来配置Cupertino风格的抽屉
cupertinoDrawerOptions: CupertinoDrawerOptions(
openGesture: true,
drawer: CupertinoNavigationBar(
middle: Text('Cupertino Drawer'),
trailing: CupertinoNavigationBarBackButton(
onPressed: () {
Navigator.of(context).pop(); // 关闭抽屉
},
),
),
// 你可以在这里添加更多的Cupertino风格的选项
),
// 在Android上,可以使用floatingActionButton和floatingActionButtonLocation
floatingActionButton: FloatingActionButton(
onPressed: () {},
tooltip: 'Action',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
bottomNavigationBar: BottomNavigationBar(
items: <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: 'Home',
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: 'Business',
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: 'School',
),
],
currentIndex: 0,
onTap: (int index) {
// Handle navigation bar item taps
},
),
),
);
}
}
在这个示例中,我们展示了如何配置NativeScaffold
的多个属性:
- AppBar:标准的Flutter应用栏。
- Drawer:一个标准的Material Design抽屉导航菜单。
- Body:主界面的中心内容。
- CupertinoDrawerOptions:用于iOS风格的抽屉配置(虽然在这个示例中并没有添加具体的Cupertino风格的选项)。
- FloatingActionButton:一个标准的浮动操作按钮。
- BottomNavigationBar:一个底部导航栏。
这个示例应该能帮助你理解如何在Flutter项目中使用native_scaffold
插件来创建一个具有原生风格的界面。根据你的需求,你可以进一步自定义和扩展这个示例。