Flutter自适应侧边栏插件adaptive_sidebar的使用

发布于 1周前 作者 h691938207 来自 Flutter

Flutter自适应侧边栏插件adaptive_sidebar的使用

介绍

Adaptive Sidebar 是一个用于响应式Flutter应用的侧边栏插件，具有自动调整大小的功能。

Image

使用方法

以下是 adaptive_sidebar 插件的基本使用示例：

import 'package:adaptive_sidebar/adaptive_sidebar.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'adaptive_sidebar Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        bottomAppBarTheme: const BottomAppBarTheme(
          color: Colors.white,
        ),
        useMaterial3: true,
      ),
      debugShowCheckedModeBanner: false,
      home: const TabsView(),
    );
  }
}

class TabsView extends StatefulWidget {
  const TabsView({super.key});
  [@override](/user/override)
  State<TabsView> createState() => _TabsViewState();
}

class _TabsViewState extends State<TabsView> {
  final PageController _pageController = PageController();

  [@override](/user/override)
  void dispose() {
    _pageController.dispose(); // 释放资源
    super.dispose();
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: AdaptiveSidebar(
        icon: const Icon( // 侧边栏图标
          Icons.home_rounded,
          size: 33,
        ),
        title: "Example", // 侧边栏标题
        destinations: [
          SidebarDestination( // 侧边栏目的地
            icon: Icons.home_rounded,
            label: "Home", // 目的地标签
          ),
          SidebarDestination(
            icon: Icons.settings_rounded,
            label: "Settings",
          ),
        ],
        onPageChange: (index) { // 页面切换时的回调函数
          _pageController.jumpToPage(index); // 切换页面
        },
        body: PageView(
          controller: _pageController, // 页面控制器
          children: const [
            HomeView(), // 主页视图
            SettingsView(), // 设置视图
          ],
        ),
        macOSTopPadding: false, // 是否在macOS上添加顶部填充
      ),
    );
  }
}

class HomeView extends StatefulWidget {
  const HomeView({super.key});
  [@override](/user/override)
  State<HomeView> createState() => _HomeViewState();
}

class _HomeViewState extends State<HomeView> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Home Tab', // 主页文本
        ),
      ),
    );
  }
}

class SettingsView extends StatefulWidget {
  const SettingsView({super.key});
  [@override](/user/override)
  State<SettingsView> createState() => _SettingsViewState();
}

class _SettingsViewState extends State<SettingsView> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return const Scaffold(
      body: Center(
        child: Text(
          'Settings Tab', // 设置文本
        ),
      ),
    );
  }
}

更多关于Flutter自适应侧边栏插件adaptive_sidebar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

Harmonyos Next教程
1 回复

更多关于Flutter自适应侧边栏插件adaptive_sidebar的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter项目中使用adaptive_sidebar插件来实现自适应侧边栏的代码示例。这个插件允许你创建一个在不同设备屏幕尺寸和方向下自适应的侧边栏导航。

首先，确保你已经在pubspec.yaml文件中添加了adaptive_sidebar依赖：

dependencies:
  flutter:
    sdk: flutter
  adaptive_sidebar: ^x.y.z  # 替换为最新版本号

然后运行flutter pub get来安装依赖。

接下来，在你的主Dart文件中（通常是main.dart），你可以按照以下方式使用adaptive_sidebar：

import 'package:flutter/material.dart';
import 'package:adaptive_sidebar/adaptive_sidebar.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Adaptive Sidebar Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: AdaptiveSidebarScaffold(
        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.pop(context); // 关闭抽屉
                  // 你可以在这里添加跳转到Home页面的代码
                },
              ),
              ListTile(
                leading: Icon(Icons.settings),
                title: Text('Settings'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉
                  // 你可以在这里添加跳转到Settings页面的代码
                },
              ),
            ],
          ),
        ),
        endDrawer: Drawer(
          alignment: Alignment.centerRight,
          child: ListView(
            padding: EdgeInsets.zero,
            children: <Widget>[
              DrawerHeader(
                child: Text('End Drawer Header'),
                decoration: BoxDecoration(
                  color: Colors.green,
                ),
              ),
              ListTile(
                leading: Icon(Icons.info),
                title: Text('About'),
                onTap: () {
                  Navigator.pop(context); // 关闭抽屉
                  // 你可以在这里添加跳转到About页面的代码
                },
              ),
            ],
          ),
        ),
        body: Center(
          child: Text('Main Content'),
        ),
        options: SidebarOptions(
          sidebarPosition: SidebarPosition.start,
          displayDuration: const Duration(milliseconds: 300),
          sidebarWidth: 250,
          endSidebarWidth: 200,
          backgroundColor: Colors.grey[200],
          dividerColor: Colors.grey[300],
          selectedItemColor: Colors.blue,
          unselectedItemColor: Colors.black,
          animationCurve: Curves.easeInOutQuad,
          header: Container(
            height: 60,
            color: Colors.blue,
            child: Center(
              child: Text(
                'Menu',
                style: TextStyle(color: Colors.white),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

在这个示例中，我们创建了一个AdaptiveSidebarScaffold，它包含了主内容区(body)，一个常规的侧边栏抽屉(drawer)，以及一个可选的右侧抽屉(endDrawer)。我们还配置了SidebarOptions来自定义侧边栏的样式和行为，比如位置、宽度、颜色等。

这个示例展示了基本的用法，你可以根据需要进一步自定义和扩展，比如添加更多的菜单项、处理导航逻辑等。

回到顶部