时间戳

首页 > 解决方案 > Flutter 警报对话框未居中

flutter - Flutter 警报对话框未居中

问题描述

我正在创建一个 Flutter 移动应用程序。我有一个带抽屉的脚手架，它在应用程序中居中，如下所示：

居中抽屉：https ://ibb.co/s5BMdNM

当用户点击第二个 ListTile 即“过滤字符/选择类别”时，会弹出一个 AlertDialog。问题是警报对话框在横向中既不是垂直居中也不是水平居中，并且在纵向中它不是垂直居中。

景观警报对话框： https ://ibb.co/GtdJ2jZ

纵向警报对话框： https ://ibb.co/HH6vQbx

我尝试计算错位的百分比并将其添加为右侧的填充，当设备方向为 LandscapeRight 时它起作用，但当方向变为 LandscapeLeft 时再次错位。

右调整：https ://ibb.co/h9K0YB3

左错位：https ://ibb.co/JykZ67x

我已经搜索过，但目前在获取设备的真实方向时存在问题。

那么任何人都可以帮助我将 AlertDialog 居中，或者告诉我为什么它没有居中？提前致谢。

总结抽屉代码：

Scaffold(
key: scaffoldKey,
backgroundColor: Colors.grey[100],
body: _getScaffoldBody(homePageState, context),
drawer: Center(
child: Container(
  alignment: Alignment.center,
  width: MediaQuery.of(context).size.width * 0.9 > 375
      ? 375
      : MediaQuery.of(context).size.width * 0.9,
  height: MediaQuery.of(context).size.height * 0.9 > 58.0 * 6
      ? 58.0 * 6 // 58 * Number of List Tiles
      : MediaQuery.of(context).size.height * 0.9,
  decoration: new BoxDecoration(
    color: Colors.white,
    borderRadius: new BorderRadius.all(Radius.circular(5)),
  ),
  child: ListView(
    shrinkWrap: true,
    padding: EdgeInsets.zero,
    physics: BouncingScrollPhysics(),
    children: <Widget>[
      Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          ListTile(
            title: Text('Filter Characters / Choose Categories'),
            trailing: Icon(
              Icons.search,
              color: Colors.blue,
            ),
            onTap: () {
              showCategoriesDialg(homePageState, context);
            },
          ),
        ],
      ),
    ),
  ),
),

显示 AlertDialog 的代码：

Future showCategoriesDialg(State<HomePage> homePageState, BuildContext context) async {
  return showDialog<void>(
    context: context,
    barrierDismissible: false, // user must tap a button!
    builder: (BuildContext context) {
      return AlertDialog(
        scrollable: true,
        content: Container(
          width: MediaQuery.of(context).size.width,
          height: MediaQuery.of(context).size.height - 200,
          child: ListView.builder(
            itemCount: categories.length,
            itemBuilder: (context, index) {
              return CheckboxListTile(
                title: Text(categories.values.elementAt(index).titleEn),
                value: categories.values.elementAt(index).checked,
                onChanged: (newValue) {
                  homePageState.setState(() {
                    categories.values.elementAt(index).checked = newValue;
                  });
                },
                controlAffinity: ListTileControlAffinity.trailing,
              );
            },
          ),
        ),
      );
    },
  );
}

标签： flutterflutter-alertdialog

解决方案

这是获取设备方向的方法

 void main() => runApp(MyApp());

 class MyApp extends StatelessWidget {

   Widget _portraitView(){

     // Return Your Widget View Here Which you want to Load on Portrait Orientation.
     return Container(
    width: 300.00,
     color: Colors.green,
     padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
     child: Text(' Portrait View Detected. ',
             textAlign: TextAlign.center,  
             style: TextStyle(fontSize: 24, color: Colors.white)));
   } 

    Widget _landscapeView(){

     // // Return Your Widget View Here Which you want to Load on Landscape      Orientation.
     return Container(
     width: 300.00,
     color: Colors.pink,
     padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
     child: Text(' Landscape View Detected.',
             textAlign: TextAlign.center,  
             style: TextStyle(fontSize: 24, color: Colors.white)));
   }

   @override
   Widget build(BuildContext context) {
     return MaterialApp(
         home: Scaffold(
         appBar: AppBar(
         title: Text('Detect Device Screen Orientation')),
         body: OrientationBuilder(
           builder: (context, orientation) {
           return Center(

             child: orientation == Orientation.portrait 
             ? _portraitView() 
             : _landscapeView() 

                 );
            }
           )
          )
       );
   }
 }

获得正确的设备方向后，您可以相应地放置小部件。并且不要使用固定值作为高度和宽度，始终使用 MediaQuery.of(context).size.height * percentYouWant MediaQuery.of(context).size.height * 0.5

等等。

希望能帮到你

推荐阅读