如何在 flutter 中的按钮单击上显示覆盖底部和底部导航顶部？

Question

我想显示这两个按钮，单击底部导航中的中间按钮。 我已经创建了底部对话框，但它不起作用。 单击图像按钮。 请帮我！

void _bottomSheet() {
Container(
  height: 500,
  width: double.infinity,
  color: Colors.white,
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Row(
        children: [
          Flexible(
            flex: 1,
            child: Align(
              alignment: Alignment.centerRight,
              child: FloatingActionButton(
                onPressed: () {
                  // Add your onPressed code here!
                },
                backgroundColor: Colors.black,
                child: const Icon(
                  MyBottomIcon.barcode,
                ),
              ),
            ),
          ),
          SizedBox(
            width: 20,
          ),
          Flexible(
            flex: 1,
            child: Align(
              alignment: Alignment.centerLeft,
              child: FloatingActionButton(
                onPressed: () {
                  // Add your onPressed code here!
                },
                backgroundColor: Colors.black,
                child: const Icon(
                  MyBottomIcon.barcode,
                ),
              ),
            ),
          ),
        ],
      ),
    ],
  ),
);

}

请检查我的代码并在我调用此方法时更正我，屏幕上没有显示任何内容。

Answer 1

我的建议是使用 floatingActionButton

floatingActionButton: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisSize: MainAxisSize.max,
    mainAxisAlignment: MainAxisAlignment.end,
    children: [
      Container(
        padding: const EdgeInsets.all(5),
        width: 80.0,
        height: 80.0,
        child: FloatingActionButton(
          onPressed: () => showAlertDialog(context), // Call the function from example below
          elevation: 7.0,
          child: const Icon(
            Icons.add,
            size: 50,
          ),
        ),
      ),
    ],
  ),
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,

创建showAlertDialog(context) function 并根据您的需要调整小部件。

showAlertDialog(BuildContext context) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      return Center(
        child: Container(
          padding: const EdgeInsets.only(top: 380.0),
          child: Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.center,
            children: <Widget>[
              Container(
                width: double.infinity,
                height: 800,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(15),
                    color: Colors.transparent),
                padding: const EdgeInsets.fromLTRB(20, 50, 20, 20),
                child: Column(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    Container(
                      height: 100,
                      padding: const EdgeInsets.all(5.0),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: [
                          Padding(
                            padding: const EdgeInsets.only(right: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                ClipOval(
                                  child: Container(
                                    color: Colors.yellow,
                                    height: 70.0,
                                    width: 70.0,
                                    child: const Center(
                                      child: SizedBox(
                                        height: 30,
                                        width: 30,
                                        child: Icon(Icons.phone),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(left: 10),
                            child: Column(
                              crossAxisAlignment: CrossAxisAlignment.center,
                              mainAxisAlignment: MainAxisAlignment.spaceAround,
                              children: [
                                ClipOval(
                                  child: Container(
                                    color: Colors.red,
                                    height: 70.0,
                                    width: 70.0,
                                    child: const Center(
                                      child: SizedBox(
                                        height: 30,
                                        width: 30,
                                        child: Icon(Icons.computer),
                                      ),
                                    ),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisSize: MainAxisSize.max,
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  Container(
                    padding: const EdgeInsets.all(5),
                    width: 80.0,
                    height: 80.0,
                    child: FloatingActionButton(
                      onPressed: () => {Navigator.pop(context)},
                      elevation: 7.0,
                      child: const Icon(
                        Icons.close,
                        size: 50,
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      );
    },
  );
}