检查内容功能(Flutter)

pbpqsu0x  于 2023-02-13  发布在  Flutter
关注(0)|答案(4)|浏览(130)

我使用下面的函数检查并显示对话框或底表中的内容,但当执行该函数时无法正常工作,因为它同时显示两个内容,原因是什么?如何解决该问题?
有没有可能为这个函数建议一个更好的名称?

内容功能:

content(BuildContext context, dynamic dialog, dynamic bottomSheet) {
  (MediaQuery.of(context).orientation == Orientation.landscape) ? dialog : bottomSheet;
}

执行情况:

ElevatedButton(
    child: Text('Button'),
    onPressed: () {
        content(context, dialog(context), bottomSheet(context));
    }, 
),

如何解决这个问题?

ecfdbz9o

ecfdbz9o1#

为了确定屏幕的方向,我们可以使用OrientationBuilder小部件。OrientationBuilder将确定当前的方向,并在方向改变时重建。

void main() async {
  runApp(const Home(
  ));
}

class Home extends StatefulWidget {
  const Home({Key key}) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(home:  Scaffold(
      body: Center(
        child:  OrientationBuilder(
          builder: (context, orientation) {
            return ElevatedButton(
              child: Text('Button'),
              onPressed: () {
                revealContent(orientation,context);
              },
            );
          },
        )
      ),
    ));
  }
  revealContent(Orientation orientation, BuildContext context) {
     orientation == Orientation.landscape ? dialog(context) : bottomSheet(context);
  }
  dialog(BuildContext context){
    showDialog(
        context: context,
        builder: (context) => const Dialog(
          child: Padding(
            padding: EdgeInsets.all(20.0),
            child: Text('test'),
          ),
        )
    );
  }
  bottomSheet(final BuildContext context)  {
    return showModalBottomSheet(
      context: context,
      isScrollControlled: true,
      builder: (builder) => const Padding(
        padding: EdgeInsets.all(20.0),
        child: Text('test'),
      ),
    );
  }
}

以下是截图:

快乐编码...

ep6jt1vc

ep6jt1vc2#

函数不能正常工作的原因是因为您实际上没有显示对话框或底部工作表。要显示对话框或底部工作表,您需要分别调用showDialog或showModalBottomSheet,并将调用dialog或bottomSheet的结果传递给它们。
试试这个

void revealContent(BuildContext context, Widget dialog, Widget bottomSheet) {
  (MediaQuery.of(context).orientation == Orientation.landscape)
      ? showDialog(context: context, builder: (context) => dialog)
      : showModalBottomSheet(context: context, builder: (context) => bottomSheet);

}
a2mppw5e

a2mppw5e3#

对于代码的作用,您有一个根本性的误解。
以"实现"和revealContent代码为例:

ElevatedButton(
    child: Text('Button'),
    onPressed: () {
        revealContent(context, dialog(context), bottomSheet(context));
    }, 
),
revealContent(BuildContext context, dynamic dialog, dynamic bottomSheet) {
  (MediaQuery.of(context).orientation == Orientation.landscape) ? dialog : bottomSheet;
}

您认为revealContent会根据屏幕的方向调用dialogbottomSheet,但实际上您同时调用了这两个函数,然后将调用结果传递给revealContentrevealContent实际上并没有对它们执行任何操作。
您需要做的是将函数作为回调传递给revealContent,然后在函数中调用回调:
一个二个一个一个

o7jaxewo

o7jaxewo4#

应该在revealContent中调用showDialogshowModalBottomSheet

    • 对话框**
dialog(BuildContext context){
 return Dialog( //.. );
}
    • 底部工作表**
bottomSheet(final BuildContext context)  {
  return Widget( /.. );
}
    • 显示内容**
void revealContent(BuildContext context, Widget dialog, Widget bottomSheet) {
  if (MediaQuery.of(context).orientation == Orientation.landscape) {
      return showDialog(context: context, builder: (context) => dialog);
  } else {
      return showModalBottomSheet(context: context, builder: (context) => bottomSheet);
  } 

}

相关问题