flutter - 如何在颤动中创建浮动按钮栏?
问题描述
我想在颤振中创建一个浮动按钮栏,类似于floating bottom bar
共享的图像中所示
上图来自依赖https://pub.dev/packages/floating_bottom_navigation_bar,这是用于页面导航,但我不希望导航只希望在按下按钮时执行操作,并且视图应该是相同的。
解决方案
您可以在下面复制粘贴运行完整代码
您不需要将页面导航逻辑放入其中,视图将相同
您可以直接检查onTap
以了解用户单击了哪个按钮
bottomNavigationBar: FloatingNavbar(
onTap: (int val) {
switch (val) {
case 0:
{
action = "Home";
}
break;
工作演示
完整代码
import 'package:floating_bottom_navigation_bar/floating_bottom_navigation_bar.dart';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatefulWidget {
// This widget is the root of your application.
@override
_MyAppState createState() => _MyAppState();
}
class _MyAppState extends State<MyApp> {
int _index = 0;
String action = "Home";
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Floating NavBar Example',
home: Scaffold(
appBar: AppBar(
title: Text('Floating NavBar Example'),
centerTitle: true,
),
//If you want to show body behind the navbar, it should be true
extendBody: true,
body: Center(
child: Column(
children: [
Text(
"index: $_index",
style: TextStyle(
fontSize: 52,
),
),
Text("$action"),
],
),
),
bottomNavigationBar: FloatingNavbar(
onTap: (int val) {
switch (val) {
case 0:
{
action = "Home";
}
break;
case 1:
{
action = "Explore"; //statements;
}
break;
case 2:
{
action = "Chats"; //statements;
}
break;
case 3:
{
action = "Settings"; //statements;
}
break;
default:
{
//statements;
}
break;
}
setState(() => _index = val);
},
currentIndex: _index,
items: [
FloatingNavbarItem(icon: Icons.home, title: 'Home'),
FloatingNavbarItem(icon: Icons.explore, title: 'Explore'),
FloatingNavbarItem(icon: Icons.chat_bubble_outline, title: 'Chats'),
FloatingNavbarItem(icon: Icons.settings, title: 'Settings'),
],
),
),
);
}
}
推荐阅读
- cpu-architecture - 一个门输入与其他门的多个输出之间的连接如何导致电路记忆?
- vba - Access - 在文本框中显示记录数
- logic - 如何简化实质含义?
- powershell - Invoke-RestMethod:powershell 脚本中的底层连接已关闭错误
- vbscript - 连接文件夹以形成路径时的预期文字常量
- r - 从现有数据框列表创建新的数据框列表
- python - 根据另一个数据框中的列在熊猫数据框中保留行
- java - Spring在进入控制器之前将String解析为枚举
- javascript - 未捕获的类型错误:google.maps.infoWindow 不是构造函数
- r - 分组汇总返回 NA;也是来自网络的小例子