[英]Flutter make floating action stick to bottom nav bar
我有一个 flutter 应用程序,底部导航栏有两个项目和一个位于中心的浮动操作按钮。 在我的身体中,我有一个文本字段,我打算使用搜索框。 每次我单击文本字段时,浮动操作按钮都会与键盘一起上升。 有没有一种方法可以使浮动操作按钮粘在底部或将其添加到底部导航栏,这样每当用户点击或使用 texfield 时它就不会向上移动。
这是底部导航栏和浮动操作按钮以及文本字段的代码
body: Column(children: [
Padding(
padding: const EdgeInsets.only(left: 16, right: 16,top: 20),
child: Container(
// padding: EdgeInsets.only(left:16,right: 16),
height: 40,
decoration: BoxDecoration(
color: Color(0xffEBEDF4),
borderRadius: BorderRadius.circular(25),
),
child: Row(
children: [
Expanded(
flex: 2,
child: Padding(
padding: const EdgeInsets.all(8.0),
child: TextFormField(
keyboardType: TextInputType.text,
inputFormatters: [UpperCaseTextFormatter()],
style: const TextStyle(
color: Colors.white,
fontSize: 15,
fontFamily: 'PoppinsRegular',
),
decoration: InputDecoration(
hintText: 'Search...',
hintStyle: theme.textTheme.caption!.copyWith(
color: const Color(0xffEBEDF4),
),
isDense: true, // important line
contentPadding: const EdgeInsets.fromLTRB(10, 10, 10, 0),
fillColor:const Color(0xffEBEDF4),
filled: true,
border: InputBorder.none,
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide: const BorderSide(
color: Color(0xffEBEDF4),
),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0),
borderSide:const BorderSide(
color: Color(0xffEBEDF4),
width: 1.0,
),
),
),
),
),
),
IconButton(
onPressed: () {
searchStuff();
},
icon:const Icon(Icons.search)),
],
),
),
),
]),
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
onPressed: () {
print('Test bottom nav bar');
},
child: const Icon(Icons.add),
),
bottomNavigationBar: BottomNavigationBar(
items: const <BottomNavigationBarItem>[
BottomNavigationBarItem(
icon: Icon(Icons.call),
label: 'Calls',
),
BottomNavigationBarItem(
icon: Icon(Icons.chat),
label: 'Chats',
),
],
currentIndex: _selectedIndex, //New
onTap: _onItemTapped,
),
这是它的样子
为避免小部件弹出,您可以在Scaffold
中使用它
Scaffold(
resizeToAvoidBottomInset: false,
);
否则,您尝试使用persistent_bottom_nav_bar package
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.