底部工作表未顯示在底部

Question

單擊頁面上的浮動按鈕時，我想顯示底部工作表。 頁面還包括底部導航欄。 單擊浮動按鈕時，底部工作表顯示在導航欄上方而不是頁面底部。 我怎樣才能做到這一點？

代碼：

void main() {
  runApp(App());
}

class App extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'app',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: AppNavigation(),
    );
  }
}

class AppNavigation extends StatefulWidget {
  @override
  _AppNavigationState createState() => _AppNavigationState();
}

class _AppNavigationState extends State<AppNavigation> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    SettingsScreen(),
  ];

  void onTappedBar(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
          onTap: onTappedBar,
          currentIndex: _currentIndex,
          items: <BottomNavigationBarItem>[
            BottomNavigationBarItem(
                icon: Icon(Icons.home), title: Text('Home')),
            BottomNavigationBarItem(
                icon: Icon(Icons.settings), title: Text('Settings')),
          ]),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size; // gives device width and height

    return Scaffold(
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              showBottomSheet(
                  context: context,
                  builder: (context) => Container(
                        height: 320,
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 5,
                              blurRadius: 20,
                              offset: Offset(0, 3),
                            ),
                          ],
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(25),
                            topRight: Radius.circular(25),
                          ),
                        ),
                        padding:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                        child: Center(child: Text('Bottom action sheet')),
                      ));
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.deepPurple),
        body: Center(child: Text("home page")));
  }
}

下面是上述代碼的 output。底部操作表出現在底部導航欄上方。 我希望底部動作應該在屏幕底部。

Answer 1

我相信您要實現的目標是通過使用“showModalBottomSheet”來完成，如下所示：

return Scaffold(
        resizeToAvoidBottomInset: false,
        floatingActionButton: FloatingActionButton(
            onPressed: () {
              // what you asked for
              showModalBottomSheet(
                barrierColor: Colors.white.withOpacity(0),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.vertical(
                      top: Radius.circular(25),
                    ),
                  ),
                  context: context,
                  builder: (context) => Container(
                        height: 320,
                        decoration: BoxDecoration(
                          boxShadow: [
                            BoxShadow(
                              color: Colors.grey.withOpacity(0.5),
                              spreadRadius: 5,
                              blurRadius: 20,
                              offset: Offset(0, 3),
                            ),
                          ],
                          color: Colors.white,
                          borderRadius: BorderRadius.only(
                            topLeft: Radius.circular(25),
                            topRight: Radius.circular(25),
                          ),
                        ),
                        padding:
                            EdgeInsets.symmetric(horizontal: 20, vertical: 30),
                        child: Center(child: Text('Bottom action sheet')),
                      ));
            },
            child: Icon(Icons.add),
            backgroundColor: Colors.deepPurple),
        body: Center(child: Text("home page")));

編輯：我已經修改了代碼，使其具有與您發布的圖片中相同的陰影效果