[英]How to add Floating action Button in Bottom Navigation Bar Center with notch?
我正在尝试在底部导航栏的中间添加一个浮动操作按钮。 问题是缺口没有出现。 这是问题的图片。
我的is代码是这样的
import 'package:flutter/material.dart';
class MyHome extends StatefulWidget {
@override
_MyHomeState createState() => _MyHomeState();
}
class _MyHomeState extends State<MyHome> {
int _selectedTab = 0;
final _pageOptions = [
Text('Item 1'),
Text('Item 2'),
Text('Item 3'),
Text('Item 4'),
];
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xffFF5555),
),
home: Scaffold(
body: _pageOptions[_selectedTab],
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Colors.red,
foregroundColor: Colors.white,
elevation: 2.0,
),
bottomNavigationBar: BottomAppBar(
notchMargin: 2.0,
shape: CircularNotchedRectangle(),
child: SizedBox(
height: 80,
child: Theme(
data: Theme.of(context).copyWith(
// sets the background color of the `BottomNavigationBar`
canvasColor: Color(0xff1B213B),
// sets the active color of the `BottomNavigationBar` if `Brightness` is light
primaryColor: Color(0xffFF5555),
textTheme: Theme.of(context)
.textTheme
.copyWith(caption: new TextStyle(color: Colors.white))),
child: BottomNavigationBar(
type: BottomNavigationBarType.fixed,
currentIndex: _selectedTab,
onTap: (int index) {
setState(() {
_selectedTab = index;
});
},
fixedColor: Color(0xffFF5555),
items: [
BottomNavigationBarItem(
icon: Icon(Icons.tv), title: Text('')),
BottomNavigationBarItem(
icon: Icon(Icons.card_membership), title: Text('')),
BottomNavigationBarItem(
icon: Icon(Icons.share), title: Text('')),
BottomNavigationBarItem(
icon: Icon(Icons.home), title: Text('')),
],
),
),
),
),
),
);
}
}
我想在中间那个红色工厂图标周围添加缺口。 我尝试了两种形状:CircularNotchedRectangle() 和 AutomaticNotchedShape 方法。 但没有任何效果。 大多数示例显示在“BottomAppBar”中使用“Row”。 但我想使用 BottomNavigationBar。 请帮我找到解决办法
在 BottomAppBar()、小部件中使用此属性
clipBehavior: Clip.antiAlias,
Scaffold(
floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,
floatingActionButton: FloatingActionButton(...),
bottomNavigationBar: BottomAppBar(
shape: CircularNotchedRectangle(),
clipBehavior: Clip.antiAliasWithSaveLayer,
...
),
);
Scaffold(
appBar: AppBar(
title: Text('Demo'),
),
backgroundColor: Theme.of(context).backgroundColor,
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton:
SizedBox(
width: 80.0,
height: 80.0,
child: FloatingActionButton(
backgroundColor: Theme.of(context).primaryColor,
child: Icon(Icons.add), onPressed: () {}),
),
bottomNavigationBar: BottomAppBar(
color: Theme.of(context).secondaryHeaderColor,
child: Container(
height: 60,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(icon: Icon(Icons.settings), onPressed: () {}),
IconButton(icon: Icon(Icons.speaker_notes_outlined), onPressed: () {}),
SizedBox(width: 40), // The dummy child
IconButton(icon: Icon(Icons.person), onPressed: () {}),
IconButton(icon: Icon(Icons.email), onPressed: () {}),
],
),
)),
);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.