Flutter底部导航栏圆角插件rounded_bottom_navbar的使用

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

Rounded Bottom NavBar #

Rounded Bottom NavBar 是一个开源的 Flutter 底部导航栏插件，支持自定义样式和响应式设计。

特性 #

  • [✓] 兼容 Android 和 iOS 平台。
  • [✓] 可定制文本字段属性。
  • [✓] 美观的字体样式。
  • [✓] 用户自定义文本控制器。
  • [✓] 完全响应式设计。
  • [✓] 加载指示器功能（即将推出）。

支持项目 #

如果你觉得这个项目对你有帮助或从源码中学到了东西，欢迎通过以下邮箱向我表示感谢：darshan51081@gmail.com

截图 #

       

使用方法 #

查看 示例代码

创建与维护 #

Darshan N

如果你觉得这个项目对你有帮助或从源码中学到了东西，欢迎通过以下邮箱向我表示感谢：darshan51081@gmail.com

许可证 #

Copyright 2022 Darshan N

Licensed under the Apache License, Version 2.0 (the “License”);
you may not use this file except in compliance with the License.
You may obtain a copy of the License at


Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an “AS IS” BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

开始使用 #

对于如何开始使用 Flutter，请参阅我们的在线 文档。

使用方法 #

dependencies:
  flutter:
    sdk: flutter
  rounded_bottom_navbar: Latest Version

示例代码 #

以下是使用 RoundedBottomNavBar 的完整示例代码：

import 'package:flutter/material.dart';
import 'package:rounded_bottom_navbar/rounded_bottom_navbar.dart'; // 导入库

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


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


@override
Widget build(BuildContext context) {
return MaterialApp(
title: ‘Flutter Demo’,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyRoundedBottomNavBar(),
);
}
}


class MyRoundedBottomNavBar extends StatefulWidget {
const MyRoundedBottomNavBar({super.key});


static const TextStyle optionStyle = TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
‘Index 0: Home’,
style: optionStyle,
),
Text(
‘Index 1: Business’,
style: optionStyle,
),
Text(
‘Index 2: School’,
style: optionStyle,
),
];


@override
State<MyRoundedBottomNavBar> createState() => _MyRoundedBottomNavBarState();
}


class _MyRoundedBottomNavBarState extends State<MyRoundedBottomNavBar> {
int _selectedIndex = 0;


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


@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text(‘BottomNavigationBar Sample’),
),
body: Center(
child: MyRoundedBottomNavBar._widgetOptions.elementAt(_selectedIndex),
),
bottomNavigationBar: RoundedBottomNavBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.home),
label: ‘Home’,
),
BottomNavigationBarItem(
icon: Icon(Icons.business),
label: ‘Business’,
),
BottomNavigationBarItem(
icon: Icon(Icons.school),
label: ‘School’,
),
],
currentIndex: _selectedIndex,
selectedItemColor: Colors.amber[800],
onTap: _onItemTapped,
),
);
}
}

额外信息 #

此包是一个轻量级的底部导航栏插件，包含了所有底部导航栏的属性。


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

1 回复

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


当然，下面是一个使用 rounded_bottom_navbar 插件在 Flutter 中实现底部导航栏圆角的示例代码。

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

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

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

接下来是示例代码，展示如何使用 rounded_bottom_navbar 来创建一个带有圆角的底部导航栏：

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

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

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

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

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  int _selectedIndex = 0;
  final List<Widget> _widgetOptions = <Widget>[
    Text('Home'),
    Text('Search'),
    Text('Library'),
    Text('Profile'),
  ];

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: _widgetOptions.elementAt(_selectedIndex),
      ),
      bottomNavigationBar: RoundedBottomNavigationBar(
        index: _selectedIndex,
        onTap: _onItemTapped,
        backgroundColor: Colors.white,
        activeColor: Colors.blue,
        inactiveColor: Colors.grey,
        borderRadius: 25.0,  // 圆角半径
        items: [
          RoundedBottomNavigationBarItem(
            icon: Icon(Icons.home),
            title: Text('Home'),
          ),
          RoundedBottomNavigationBarItem(
            icon: Icon(Icons.search),
            title: Text('Search'),
          ),
          RoundedBottomNavigationBarItem(
            icon: Icon(Icons.library_books),
            title: Text('Library'),
          ),
          RoundedBottomNavigationBarItem(
            icon: Icon(Icons.person),
            title: Text('Profile'),
          ),
        ],
      ),
    );
  }
}

在这个示例中：

  1. 我们首先定义了一个 MyApp 小部件，它是整个应用的根。
  2. MyHomePage 是一个有状态的小部件，它包含了一个底部导航栏 (RoundedBottomNavigationBar) 和一个根据选择的索引来显示的主体内容。
  3. RoundedBottomNavigationBar 的 items 属性包含了导航栏中的各个项，每个项都有一个图标和标题。
  4. borderRadius 属性用于设置底部导航栏的圆角半径。

运行这个代码后，你应该能看到一个带有圆角的底部导航栏，并且在点击不同的项时，主体内容会相应改变。

回到顶部