Flutter侧边栏导航插件side_panel的使用
Flutter侧边栏导航插件 side_panel 的使用
side_panel 是一个提供可自定义面板的Flutter包，可以显示在屏幕的左侧、右侧、顶部或底部。它支持显示和隐藏面板的动画，并可以通过 SidePanelController 进行控制。
特性
- 在屏幕的四个方向（左、右、上、下）显示面板。
- 自定义面板大小和内容。
- 支持显示和隐藏面板的动画。
- 使用
SidePanelController程序化地控制面板。
安装
在 pubspec.yaml 文件中添加 side_panel 作为依赖项：
dependencies:
side_panel: ^0.0.1
使用示例
以下是一个基本的示例，展示如何使用 SidePanel 小部件：
import 'package:flutter/material.dart';
import 'package:side_panel/side_panel.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
useMaterial3: true,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key});
[@override](/user/override)
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _controller = SidePanelController();
var _isOverlay = false;
// 面板可见状态
bool _isRightPanelVisible = false;
bool _isLeftPanelVisible = false;
bool _isTopPanelVisible = false;
bool _isBottomPanelVisible = false;
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: SidePanel(
controller: _controller,
right: Panel(
overlay: _isOverlay,
child: Container(
color: Colors.blueGrey.shade100,
child: const Center(
child: Text('Right Panel'),
),
),
),
left: Panel(
overlay: _isOverlay,
child: Container(
color: Colors.pink.shade100,
child: const Center(
child: Text('Left Panel'),
),
),
),
top: Panel(
overlay: _isOverlay,
child: Container(
color: Colors.orange.shade100,
child: const Center(
child: Text('Top Panel'),
),
),
),
bottom: Panel(
overlay: _isOverlay,
child: Container(
color: Colors.blue.shade100,
child: const Center(
child: Text('Bottom Panel'),
),
),
),
child: Center(
child: SizedBox(
width: 200,
child: ListView(
shrinkWrap: true,
children: [
CheckboxListTile(
title: const Text('Overlay'),
value: _isOverlay,
onChanged: (value) {
setState(() {
_isRightPanelVisible = false;
_isLeftPanelVisible = false;
_isTopPanelVisible = false;
_isBottomPanelVisible = false;
_controller.hideRightPanel();
_controller.hideLeftPanel();
_controller.hideBottomPanel();
_controller.hideTopPanel();
_isOverlay = value!;
});
},
),
const SizedBox(height: 12),
// 右侧面板切换按钮
ElevatedButton(
onPressed: () {
if (_isOverlay) {
_controller.showRightPanel();
return;
}
setState(() {
_isRightPanelVisible = !_isRightPanelVisible;
_isRightPanelVisible
? _controller.showRightPanel()
: _controller.hideRightPanel();
});
},
child: Text(_isRightPanelVisible
? 'Hide Right Panel'
: 'Show Right Panel'),
),
const SizedBox(height: 24),
// 左侧面板切换按钮
ElevatedButton(
onPressed: () {
if (_isOverlay) {
_controller.showLeftPanel();
return;
}
setState(() {
_isLeftPanelVisible = !_isLeftPanelVisible;
_isLeftPanelVisible
? _controller.showLeftPanel()
: _controller.hideLeftPanel();
});
},
child: Text(_isLeftPanelVisible
? 'Hide Left Panel'
: 'Show Left Panel'),
),
const SizedBox(height: 24),
// 顶面板切换按钮
ElevatedButton(
onPressed: () {
if (_isOverlay) {
_controller.showTopPanel();
return;
}
setState(() {
_isTopPanelVisible = !_isTopPanelVisible;
_isTopPanelVisible
? _controller.showTopPanel()
: _controller.hideTopPanel();
});
},
child: Text(
_isTopPanelVisible ? 'Hide Top Panel' : 'Show Top Panel'),
),
const SizedBox(height: 24),
// 底面板切换按钮
ElevatedButton(
onPressed: () {
if (_isOverlay) {
_controller.showBottomPanel();
return;
}
setState(() {
_isBottomPanelVisible = !_isBottomPanelVisible;
_isBottomPanelVisible
? _controller.showBottomPanel()
: _controller.hideBottomPanel();
});
},
child: Text(_isBottomPanelVisible
? 'Hide Bottom Panel'
: 'Show Bottom Panel'),
),
],
),
),
),
),
);
}
}
更多关于Flutter侧边栏导航插件side_panel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter侧边栏导航插件side_panel的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
在Flutter中，side_panel 插件是一个用于实现侧边栏导航的流行库。以下是一个简单的代码示例，展示如何使用 side_panel 插件来创建一个带有侧边栏导航的应用。
首先，确保你已经在 pubspec.yaml 文件中添加了 side_panel 依赖：
dependencies:
flutter:
sdk: flutter
side_panel: ^x.y.z # 替换为最新版本号
然后运行 flutter pub get 来安装依赖。
接下来，是一个完整的 Flutter 应用示例，展示了如何使用 side_panel 插件：
import 'package:flutter/material.dart';
import 'package:side_panel/side_panel.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Side Panel Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SidePanelScaffold(
panel: SidePanel(
// 侧边栏内容
header: Container(
height: 60,
color: Colors.blue,
child: Center(
child: Text(
'Menu',
style: TextStyle(color: Colors.white),
),
),
),
body: ListView(
children: <Widget>[
ListTile(
leading: Icon(Icons.home),
title: Text('Home'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => HomePage(),
),
);
},
),
ListTile(
leading: Icon(Icons.settings),
title: Text('Settings'),
onTap: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => SettingsPage(),
),
);
},
),
// 更多菜单项...
],
),
),
// 主内容区域
body: Center(
child: Text('Main Content'),
),
// 可选：显示/隐藏侧边栏的按钮
toggleButton: FloatingActionButton(
onPressed: () {
SidePanelScaffold.of(context).togglePanel();
},
child: Icon(Icons.menu),
),
),
);
}
}
// 示例主页
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Page'),
),
body: Center(
child: Text('You are on the Home Page'),
),
);
}
}
// 示例设置页面
class SettingsPage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Settings Page'),
),
body: Center(
child: Text('You are on the Settings Page'),
),
);
}
}
在这个示例中：
SidePanelScaffold是side_panel插件提供的一个 Scaffold，它允许你在应用中集成一个侧边栏。SidePanel小部件定义了侧边栏的内容和布局。在这个例子中，我们有一个带有标题和列表项的侧边栏。- 每个列表项 (
ListTile) 都有一个点击事件处理器，用于导航到不同的页面。 toggleButton是一个可选的浮动操作按钮，用于显示或隐藏侧边栏。
这个示例展示了如何使用 side_panel 插件创建一个简单的侧边栏导航应用。你可以根据自己的需求进一步自定义和扩展这个示例。
