flutter - 颤动底部导航栏样式问题
问题描述
这是我想要做的底部导航。
我如何实现这个底部导航栏?我尝试了弯曲的底部导航,但它没有给我解决方案,我尝试了带有 fab 中心停靠的颤动底部导航栏,但这也没有用。
解决方案
Flutter 对这种 UI 有一个特定的形状,称为CircularNotchedRectangle。您可以使用该类的代码来查看形状是如何绘制的,从中构建您的自定义形状,并对其进行调整以获得您想要的样式,因为它与CircularNotchedRectangle
. 我写了一个小片段,你可以在DartPad中运行,看看如何在BottomNavigationBar
. 它可能不是完全相同的形状,但我想我已经很接近了。如果没有该曲线的参数,我不可能得到确切的形状。使用s1
、s2
和addedRadius
参数来获得你想要的东西:
import 'dart:math' as math;
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class CustomNotchedRectangle extends NotchedShape {
const CustomNotchedRectangle();
@override
Path getOuterPath(Rect host, Rect guest) {
if (guest == null || !host.overlaps(guest)) return Path()..addRect(host);
const double s1 = 10.0;
const double s2 = 8.0;
const double addedRadius = 3;
final double notchRadius = guest.width / 2.0 + addedRadius;
final double r = notchRadius;
final double a = -1.0 * r - s2;
final double b = host.top - guest.center.dy;
final double n2 = math.sqrt(b * b * r * r * (a * a + b * b - r * r));
final double p2xA = ((a * r * r) - n2) / (a * a + b * b);
final double p2xB = ((a * r * r) + n2) / (a * a + b * b);
final double p2yA = math.sqrt(r * r - p2xA * p2xA);
final double p2yB = math.sqrt(r * r - p2xB * p2xB);
final List<Offset> p = List<Offset>(6);
p[0] = Offset(a - s1, b);
p[1] = Offset(a, b);
final double cmp = b < 0 ? -1.0 : 1.0;
p[2] =
cmp * p2yA > cmp * p2yB ? Offset(p2xA, p2yA) : Offset(p2xB, p2yB);
p[3] = Offset(-1.0 * p[2].dx, p[2].dy);
p[4] = Offset(-1.0 * p[1].dx, p[1].dy);
p[5] = Offset(-1.0 * p[0].dx, p[0].dy);
for (int i = 0; i < p.length; i += 1) p[i] += guest.center;
return Path()
..moveTo(host.left, host.top)
..lineTo(p[0].dx, p[0].dy)
..quadraticBezierTo(p[1].dx, p[1].dy, p[2].dx, p[2].dy)
..arcToPoint(
p[3],
radius: Radius.circular(notchRadius),
clockwise: false,
)
..quadraticBezierTo(p[4].dx, p[4].dy, p[5].dx, p[5].dy)
..lineTo(host.right, host.top)
..lineTo(host.right, host.bottom)
..lineTo(host.left, host.bottom)
..close();
}
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
void _incrementCounter() {
setState(() {
_counter++;
});
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Sample Code'),
),
body: Center(
child: Text('You have pressed the button $_counter times.'),
),
bottomNavigationBar: BottomAppBar(
shape: const CustomNotchedRectangle(),
child: Container(height: 50.0, color: Theme.of(context).primaryColor),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment Counter',
child: Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
);
}
}
结果如下:
推荐阅读
- javascript - 来自 API 的数据未在 React-Redux 应用程序的 Store (Reducer) 中更新
- vue.js - 在Vuex中按下按钮时如何将数据表单插入表格?
- angular - 我们如何在 Ionic 3 的帮助下安全地将访问令牌存储在存储中?
- virtual-memory - 禁用虚拟内存时如何在 RISC-V 32 位系统中访问 34 位物理地址空间?
- javascript - 如何在 wordpress 菜单项中添加 onclick 功能以显示页面部分(显示:无;)
- permissions - 使用服务帐户时如何防止“交付状态通知(失败)”
- batch-file - 有没有办法在cmd中设置只读(const)变量?
- php - 如何在输入中每个月添加链接(输入月份)
- angular - SyntaxError:JSON.parse 中位置 0 处 JSON 中的意外标记 v(
) 在 XMLHttpRequest.onLoad - swift - AudioKit Xcode 12 测试版