flutter - BottomBar 项目未对齐颤动
问题描述
我正在制作底部应用栏,但它的样式有问题。栏中的项目未居中和对齐。知道如何实现这种外观:https ://cdn.dribbble.com/users/195056/screenshots/4029397/bottom_bar.png
这是我正在使用的代码:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:tariffo/Detail.dart';
import 'package:tariffo/favoriteProviders.dart';
import 'package:tariffo/messages_list.dart';
import 'package:bubble_bottom_bar/bubble_bottom_bar.dart';
import 'HomePage.dart';
class BarDetail extends StatefulWidget {
@override
_BarDetailState createState() => _BarDetailState();
}
class _BarDetailState extends State<BarDetail> {
int currentIndex;
@override
void initState() {
super.initState();
currentIndex = 0;
}
changePage(int index) {
setState(() {
currentIndex = index;
});
}
@override
Widget build(BuildContext context) {
return Transform.translate(
offset: Offset(0.0, -10),
child: Container(
height: 50,
margin: EdgeInsets.only(left: 20, right: 20),
child: ClipRRect(
borderRadius: BorderRadius.all(
Radius.circular(80),
),
child: BubbleBottomBar(
opacity: 0.2,
backgroundColor: Colors.white30,
borderRadius:
BorderRadius.vertical(top: Radius.circular(80.0)),
currentIndex: currentIndex,
hasInk: true,
inkColor: Colors.black12,
hasNotch: true,
fabLocation: BubbleBottomBarFabLocation.end,
onTap: (index) {
if (index == 1)
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => FavoriteProviders()),
);
if (index == 2)
Navigator.push(
context,
MaterialPageRoute(builder: (context) => Searchbar()),
);
if (index == 3)
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => MessageList()),
);
},
items: <BubbleBottomBarItem>[
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(
Icons.dashboard,
color: Colors.black,
size: 30,
),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 30),
title: Text("Home")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.favorite_border,
color: Colors.black, size: 30),
activeIcon: Icon(
Icons.dashboard,
color: Colors.red,
size: 30,
),
title: Text("Saved")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon:
Icon(Icons.search, color: Colors.black, size: 30),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 30),
title: Text("Search")),
BubbleBottomBarItem(
backgroundColor: Colors.red,
icon: Icon(Icons.send, color: Colors.black, size: 30),
activeIcon: Icon(Icons.dashboard,
color: Colors.red, size: 30),
title: Text("Messages")),
]))));
}
}
我应该改变什么?
解决方案
用一列包裹你的 BubbleBar 并将对齐设置为中心 likr
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
BubbleBottomBar(..)
])
推荐阅读
- javascript - 使用 jQuery 跟踪鼠标指针
- flask - sqlalchemy.orm.exc.DetachedInstanceError:父实例
不绑定到会话 - visual-studio-code - VScode与WSL连接“与终端的pty主机进程的连接无响应,终端可能停止工作。”
- c++ - c ++计算导致当前函数的函数调用的深度
- excel - 为什么=isnumber(当子字符串为空时,搜索函数返回TRUE
- java - Spring Tool Suite 4 如何更改部署服务器
- wordpress - 有谁知道如何解决这一问题?
- python-3.x - python3 - 成功将 CSV 文件读入 2D Arrary 后 - 如何按索引打印单个单元格?
- flutter - 在不滚动的情况下更改 listviewbuilder 中的项目状态
- pyspark - 在 Databricks 笔记本中通过 pyspark 读取 url