Flutter 使浮動動作粘在底部導航欄

Question

我有一個 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,
      ),

這是它的樣子

Answer 1

為避免小部件彈出，您可以在Scaffold中使用它

Scaffold(
    resizeToAvoidBottomInset: false,
);

否則，您嘗試使用persistent_bottom_nav_bar package