如何在 Flutter 中使用底部導航選項卡欄內容僅更新一半屏幕

Question

有 ' TextInputArea ' 小部件，並希望讓這個小部件一直保持在屏幕上（屏幕的上部），

屏幕的下半部分需要根據BottomNavigationBar （它有三個頁面 XX，YY，ZZ）被點擊更改

但是“ TextInputArea ”沒有加載到屏幕上。

試過這樣的事情

Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBarWidget(),
        body: TextInputArea(),          
        bottomNavigationBar: Location(),
        floatingActionButton: TextFloatingButtonSpeedDial(),
      ),
  }

地址.dart

class Location extends StatefulWidget {

  @override
  State<Location> createState() => _LocationState();
}

    class _LocationState extends State<Location> {
      final List<Map<String, Object>> _pages = [
        {
          'page': India(),
          'title': 'india',
        },
        {
          'page': Universe(targetArea: Galaxy.milkyway),
          'title': 'milkyway',
        },
        {
          'page': Universe(targetArea: Galaxy.other),,
          'title': 'other',
        },
      ];
      int _selectedPageIndex = 0;
    
      void _selectPage(int index) {
        setState(() {
          _selectedPageIndex = index;
        });
      }
    
      @override
      Widget build(BuildContext context) {
        
        return Scaffold(
          appBar: AppBar(
            title: Text(_pages[_selectedPageIndex]['title'] as String),
          ),
          body: _pages[_selectedPageIndex]['page'] as Widget,
          bottomNavigationBar: BottomNavigationBar(
            backgroundColor: Colors.white,
            unselectedItemColor: Colors.grey,
            selectedItemColor: Colors.blue,
            currentIndex: _selectedPageIndex,
            items: [
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.abc),
                label: 'ZZ',
              ),
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.water_drop_outlined),
                label: 'YY',
              ),
              BottomNavigationBarItem(
                backgroundColor: Colors.lightBlue,
                icon: Icon(Icons.filter_list_alt),
                label: 'XX',
              ),
            ],
            onTap: _selectPage,
          ),
        );
      }
    }

Answer 1

使用需要更新內部小部件的小部件創建 state 變量時存在一個常見問題。 但不重新分配變量值將是相同的。 在這種情況下，您可以創建方法而不是變量。

List<Map<String, Object>> _pages() => [...

並使用_pages()[_selectedPageIndex]

Answer 2

將您的主要小部件更改為此：

Widget build(BuildContext context) {
    returnScaffold(
        appBar: AppBarWidget(),
        body: Column(children: [
                Expanded(child: TextInputArea()),
                Location(),
              ]),          
        floatingActionButton: TextFloatingButtonSpeedDial(),
      ),
  }