Question

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

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

当用户在第二个ListTile上轻按“筛选字符/选择类别”时，将弹出AlertDialog。问题是“警报”对话框在“横向”中既没有在垂直方向上也没有在水平方向上居中，在“人像”中也没有在垂直方向上居中。

横向警报对话框：https://ibb.co/GtdJ2jZ

Portrait AlertDialog：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,
              );
            },
          ),
        ),
      );
    },
  );
}

Answer 1

这是获取设备方向的方法

 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

等等。

希望会帮助您

Flutter警报对话框未居中

1 个答案: