颤振警报对话框未居中

Question

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

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

当用户点击第二个列表磁贴(即"筛选字符/选择类别"(时，会弹出警报对话框。问题是警报对话框在横向方向上既没有垂直也没有水平居中，并且在纵向对话框中也没有垂直居中。

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

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

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

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

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

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

那么谁能帮我居中警报对话框，或者告诉我为什么它没有居中？提前谢谢。

抽屉代码摘要：

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);
},
),
],
),
),
),
),

显示警报对话框的代码：

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

等。

希望对您有所帮助