Flutter底部导航插件based_dock_scaffold的使用

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

Flutter底部导航插件based_dock_scaffold的使用

based_dock_scaffold

『 based_dock_scaffold - 基于iPad样式的底部导航栏！ 』

最新更新: 2023-07-25 23:54:08

📚 简介

BasedDockScaffold 是一个帮助你创建具有iPad样式的底部导航栏的组件。

📸 截图

截图

或者尝试在线示例应用。

📦 如何使用

  1. 按照安装指南将based_dock_scaffold添加到你的pubspec.yaml文件中。
  2. 查看示例代码。

⏳ 进度

已完成，但如有必要会进行修订。

📌 注意事项

  • 切勿 导入src目录下的任何文件：

    // 错误示例
import 'package:based_dock_scaffold/src/*.dart';

  • 切勿 在dockChild子树中使用BasedDockScaffold.of(context)：

    例如，在示例代码中的widget树中，你无法找到BasedDockScaffoldState。

    widget_tree

  • BasedDockScaffold 实际上并不是一个Scaffold组件， 因此不能通过BasedDockScaffold.of(context)获取ScaffoldState。 相反，你应该使用Scaffold.of(context)来获取ScaffoldState。

🧑‍💻 贡献者

🔦 声明

许可证

该项目根据MIT许可协议授权。详情请查看LICENSE。

示例代码

下面是使用based_dock_scaffold的完整示例代码：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    SettingsScreen(),
    ProfileScreen(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return BasedDockScaffold(
      dockChild: Container(
        color: Colors.white,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            IconButton(
              icon: Icon(Icons.home),
              onPressed: () {
                onTabTapped(0);
              },
            ),
            IconButton(
              icon: Icon(Icons.settings),
              onPressed: () {
                onTabTapped(1);
              },
            ),
            IconButton(
              icon: Icon(Icons.person),
              onPressed: () {
                onTabTapped(2);
              },
            ),
          ],
        ),
      ),
      body: _children[_currentIndex],
    );
  }
}

class HomeScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Home Screen'));
  }
}

class SettingsScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Settings Screen'));
  }
}

class ProfileScreen extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Center(child: Text('Profile Screen'));
  }
}

更多关于Flutter底部导航插件based_dock_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter底部导航插件based_dock_scaffold的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，based_dock_scaffold 是一个在 Flutter 中用于实现底部导航的插件。它提供了一些高级功能，使得底部导航栏的实现更加灵活和美观。下面是一个简单的代码示例，展示了如何使用 based_dock_scaffold 来创建一个带有底部导航的应用。

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

dependencies:
  flutter:
    sdk: flutter
  based_dock_scaffold: ^最新版本号  # 替换为实际的最新版本号

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

接下来，是一个简单的示例代码，展示了如何使用 based_dock_scaffold：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Based Dock Scaffold Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _selectedIndex = 0;

  final List<Widget> _widgetOptions = <Widget>[
    Text('Home Page'),
    Text('Search Page'),
    Text('Settings Page'),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return BasedDockScaffold(
      backgroundColor: Colors.white,
      dockItems: <DockItem>[
        DockItem(
          icon: Icon(Icons.home),
          label: 'Home',
        ),
        DockItem(
          icon: Icon(Icons.search),
          label: 'Search',
        ),
        DockItem(
          icon: Icon(Icons.settings),
          label: 'Settings',
        ),
      ],
      currentIndex: _selectedIndex,
      onItemTap: _onItemTapped,
      body: _widgetOptions[_selectedIndex],
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      bottomNavigationBar: BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
      ),
    );
  }
}

在这个示例中，我们做了以下几件事情：

  1. 使用 BasedDockScaffold 作为根布局组件。
  2. 定义了 dockItems，这些项将显示在底部导航栏中。
  3. 使用 _selectedIndex 来跟踪当前选中的页面。
  4. 根据 _selectedIndex 来显示相应的页面内容。
  5. 添加了一个 FloatingActionButton 作为示例。
  6. 使用 BottomNavigationBar 作为备用底部导航栏（注意：BasedDockScaffold 自带了底部导航功能，这里的 BottomNavigationBar 主要是为了展示如何结合使用，实际使用中可能不需要）。

请注意，BasedDockScaffold 提供了很多自定义选项，比如调整图标大小、标签位置、动画效果等，你可以根据需求进一步自定义。同时，由于插件版本可能会更新，请参考最新的文档和示例代码以获取最新的使用方法和功能。

回到顶部