Flutter可调整大小导航栏插件navigator_resizable的使用

Flutter可调整大小导航栏插件navigator_resizable的使用

NavigatorResizable

GitHub Repo stars GitHub last commit (branch) Pub Version Pub Likes Pub Points Pub Monthly Downloads

NavigatorResizable 是 Navigator 的一个轻量级包装，它视觉上调整子导航器的大小以匹配当前路由中显示的内容大小。所有标准的导航API（如 Navigator.push、Navigator.pop、命名路由和页面API等）都可以与 NavigatorResizable 一起使用，就像使用普通的导航器一样。

示例图

demo_clip_minimal_example demo_clip_practical_example

资源

  • 查看 example 了解基本用法和实际示例。
  • 查看 API文档 获取 NavigatorResizable 小部件的详细描述。

问题

如果您有任何问题，请随时在讨论页面提问。

参与贡献

贡献使开源社区成为了一个学习、启发和创造的绝佳场所。您的任何贡献都非常感谢。

  1. Fork 项目
  2. 创建您的特性分支 (git checkout -b feature/AmazingFeature)
  3. 提交更改 (git commit -m 'Add some AmazingFeature')
  4. 推送到分支 (git push origin feature/AmazingFeature)
  5. 打开拉取请求

不要忘记给项目加星！谢谢！

链接

完整示例Demo

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

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

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

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: NavigatorResizable(
          child: Navigator(
            onGenerateRoute: (settings) {
              return MaterialPageRoute(builder: (context) {
                return Center(
                  child: Text('Hello World'),
                );
              });
            },
          ),
        ),
      ),
    );
  }
}

这个完整的示例展示了如何在Flutter应用中使用 NavigatorResizable 插件来创建一个可以调整大小的导航栏。希望这个例子能帮助您更好地理解和使用这个插件。


更多关于Flutter可调整大小导航栏插件navigator_resizable的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter可调整大小导航栏插件navigator_resizable的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，下面是一个关于如何在Flutter应用中使用navigator_resizable插件来实现可调整大小的导航栏的示例代码。navigator_resizable插件允许你创建一个可以动态调整大小的导航栏，非常适合需要根据用户输入或应用状态动态调整UI布局的场景。

首先，你需要在pubspec.yaml文件中添加navigator_resizable依赖：

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

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

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

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Navigator Resizable Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: ResizableNavigator(
        initialRoute: '/',
        routes: {
          '/': (context) => HomeScreen(),
          '/details': (context) => DetailsScreen(),
        },
        builder: (context, navigationState, navigator) {
          return Scaffold(
            appBar: AppBar(
              title: Text('Resizable Navigator Demo'),
              actions: [
                IconButton(
                  icon: Icon(Icons.expand_more),
                  onPressed: () {
                    // 打开调整大小的抽屉菜单
                    ScaffoldMessenger.of(context).showBottomSheet((context) {
                      return Container(
                        height: 200,
                        color: Colors.white,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            Text('Adjustable size options here'),
                            ElevatedButton(
                              onPressed: () {
                                // 这里可以添加改变导航栏大小的逻辑
                                // 例如，改变某个状态变量
                                Navigator.of(context).pop();
                              },
                              child: Text('Close'),
                            ),
                          ],
                        ),
                      );
                    });
                  },
                ),
              ],
            ),
            body: navigator,
          );
        },
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Home Screen'),
          ElevatedButton(
            onPressed: () {
              Navigator.pushNamed(context, '/details');
            },
            child: Text('Go to Details'),
          ),
        ],
      ),
    );
  }
}

class DetailsScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Details Screen'),
          ElevatedButton(
            onPressed: () {
              Navigator.pop(context);
            },
            child: Text('Go Back'),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. ResizableNavigator被用作主导航器，它允许动态调整大小。
  2. builder参数用于构建Scaffold，其中包含应用栏和导航器主体。
  3. 在应用栏的actions中添加了一个IconButton，用于打开一个底部抽屉菜单，你可以在这个菜单中添加调整大小的选项（这里只是演示，并没有实际的调整逻辑）。
  4. 提供了两个简单的路由：HomeScreen和DetailsScreen，用于演示导航功能。

请注意，这个示例只是展示了如何使用navigator_resizable插件的基本结构。要实现具体的调整大小功能，你需要根据应用的需求进一步定制和调整代码。

回到顶部