时间戳

首页 > 解决方案 > 底部工作表未显示在底部

flutter - 底部工作表未显示在底部

问题描述

单击页面上的浮动按钮时，我想显示底部工作表。页面还包括底部导航栏。单击浮动按钮时，底部工作表显示在导航栏上方而不是页面底部。我怎样才能做到这一点？

代码：

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")));
  }
}

下面是上述代码的输出。底部操作表显示在底部导航栏上方。我希望底部动作应该在屏幕底部。

上述代码的输出

标签： flutterdartflutter-layoutflutter-bottomnavigationactionsheet

解决方案

我相信您要实现的目标是通过使用“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")));

编辑：我已经修改了代码，使其具有与您发布的图片中相同的阴影效果

推荐阅读