Flutter ClipRRect 边框半径不适用于 bottomNavigationBar
Flutter ClipRRect border radius not working on bottomNavigationBar
我正在尝试从我的 swift 应用程序中重新创建一个浮动导航栏。由于某种原因,使用下面的代码,th UI 中仍然没有 borderRadius
。我试过更改颜色,使容器透明,甚至使用带有 boxDecoration
的容器。没有什么是向 UI 添加 borderRadius
。导航栏是否不允许在 flutter 中有 borderRadius
?这是我的代码:
class MyHome extends StatefulWidget {
const MyHome({Key? key}) : super(key: key);
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBarView(
children: [
HomeScreen(),
HomeScreen(),
HomeScreen(),
HomeScreen(),
HomeScreen()
],
controller: _tabController
),
bottomNavigationBar: Container(
color: Colors.transparent,
padding: EdgeInsets.all(15),
child: ClipRRect(
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(50.0),
child: Container(
color: Colors.transparent,
child: TabBar(
labelColor: Colors.teal[200],
unselectedLabelColor: Colors.blueGrey,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.teal),
insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
),
indicatorColor: Colors.teal,
tabs: [
Tab(icon: Icon(Icons.home_outlined)),
Tab(icon: Icon(Icons.explore_outlined)),
Tab(icon: Icon(Icons.camera_alt_outlined)),
Tab(icon: Icon(Icons.movie_outlined)),
Tab(icon: Icon(Icons.person_outline))
],
controller: _tabController),
),
),
),
);
}
我通过将最外层 Container 的颜色更改为 Colors.transparent 来尝试使用您的代码,这就是我得到的结果。这是您期望的浮动导航栏的结果吗?也许您需要更改 Scaffold 的 backgroundColor 以更好地查看边框半径。
我正在尝试从我的 swift 应用程序中重新创建一个浮动导航栏。由于某种原因,使用下面的代码,th UI 中仍然没有 borderRadius
。我试过更改颜色,使容器透明,甚至使用带有 boxDecoration
的容器。没有什么是向 UI 添加 borderRadius
。导航栏是否不允许在 flutter 中有 borderRadius
?这是我的代码:
class MyHome extends StatefulWidget {
const MyHome({Key? key}) : super(key: key);
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> with SingleTickerProviderStateMixin {
late TabController _tabController;
@override
void initState() {
super.initState();
_tabController = TabController(length: 5, vsync: this);
}
@override
void dispose() {
super.dispose();
_tabController.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: TabBarView(
children: [
HomeScreen(),
HomeScreen(),
HomeScreen(),
HomeScreen(),
HomeScreen()
],
controller: _tabController
),
bottomNavigationBar: Container(
color: Colors.transparent,
padding: EdgeInsets.all(15),
child: ClipRRect(
clipBehavior: Clip.hardEdge,
borderRadius: BorderRadius.circular(50.0),
child: Container(
color: Colors.transparent,
child: TabBar(
labelColor: Colors.teal[200],
unselectedLabelColor: Colors.blueGrey,
indicator: UnderlineTabIndicator(
borderSide: BorderSide(color: Colors.teal),
insets: EdgeInsets.fromLTRB(50, 0, 50, 40)
),
indicatorColor: Colors.teal,
tabs: [
Tab(icon: Icon(Icons.home_outlined)),
Tab(icon: Icon(Icons.explore_outlined)),
Tab(icon: Icon(Icons.camera_alt_outlined)),
Tab(icon: Icon(Icons.movie_outlined)),
Tab(icon: Icon(Icons.person_outline))
],
controller: _tabController),
),
),
),
);
}
我通过将最外层 Container 的颜色更改为 Colors.transparent 来尝试使用您的代码,这就是我得到的结果。这是您期望的浮动导航栏的结果吗?也许您需要更改 Scaffold 的 backgroundColor 以更好地查看边框半径。