【发布时间】：2021-12-21 03:44:53
【问题描述】：
目标：尊重不同的屏幕尺寸。
问题：Screen 的 UI 在不同设备上显示效果不佳，导致 UI 报错
例如：在 iPhone 13 模拟器上，一切看起来都应该如此，但当您使用屏幕分辨率为 1280x768 的智能手机时，一切都会崩溃
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'auth.dart';
void main() {
runApp(const Auth());
}
class Main extends StatelessWidget {
const Main({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.green,
),
home: const MainPage(),
);
}
}
class MainPage extends StatefulWidget {
const MainPage({Key? key}) : super(key: key);
@override
State<MainPage> createState() => _MainPageState();
}
class _MainPageState extends State<MainPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: false,
appBar: AppBar(
toolbarHeight: 0,
),
backgroundColor: const Color.fromARGB(255, 247, 255, 247),
body: SafeArea(
bottom: false,
child: Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage('assets/images/spikelets.png'),
fit: BoxFit.fitWidth,
),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Stack(
children: [
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 35, left: 49),
child: Text(
'Добро',
style: TextStyle(
fontFamily: 'GoodVibesCyr',
fontSize: 92,
color: Colors.green,
),
)),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 100, left: 35),
child: Text(
'пожаловать!',
style: TextStyle(
fontFamily: 'TTCommons',
fontSize: 54,
color: Colors.green,
fontWeight: FontWeight.bold,
),
)),
],
),
Container(
alignment: Alignment.topLeft,
margin: EdgeInsets.only(top: 20, left: 25),
child: Text(
'Мобильный заказ',
style: TextStyle(
fontFamily: 'TTCommons',
fontWeight: FontWeight.bold,
fontSize: 36,
color: Colors.black,
),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(left: 25, top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
Container(
height: 150,
width: 150,
margin: EdgeInsets.only(left: 25, top: 15),
decoration: const BoxDecoration(
image: DecorationImage(
alignment: Alignment.bottomCenter,
image: AssetImage(
'assets/images/backgroundMainButtons.png'),
fit: BoxFit.fitWidth,
),
boxShadow: [
BoxShadow(
color: Color.fromARGB(41, 0, 0, 0),
blurRadius: 6,
offset: Offset(0, 3), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
),
],
),
Container(
margin: EdgeInsets.only(top: 15, right: 15),
width: 325,
height: 60,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Color.fromARGB(255, 67, 152, 71),
blurRadius: 0,
offset: Offset(0, 10), // changes position of shadow
),
],
borderRadius: BorderRadius.all(Radius.circular(20)),
),
child: SizedBox(
width: 325,
height: 60,
child: ElevatedButton(
onPressed: () {},
child: Text(
'Товары недели',
style: TextStyle(
fontFamily: 'TTCommons',
fontSize: 32,
fontWeight: FontWeight.bold),
),
style: ElevatedButton.styleFrom(
alignment: Alignment.center,
shadowColor: Color.fromARGB(0, 0, 0, 0),
padding: EdgeInsets.all(15),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20), // <-- Radius
),
),
),
),
),
],
),
),
),
);
}
}
提供的屏幕截图声明了更多细节：
【问题讨论】：
标签： android ios flutter resize screen-size