我在Flutter项目中遇到了一个问题,当在模拟器中运行代码时,UI看起来非常好。然而,在使用命令flutter build apk
构建应用程序并将其安装在我的物理设备上之后,UI就被破坏了。我不确定此问题的原因,我正在寻求帮助来确定和解决它。
代码:
import 'package:flutter/material.dart';
import 'Screens/loginScreen.dart';
import 'Functionality/loginFunctionality.dart';
import 'Screens/signupScreen.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: SplashScreen(),
);
}
}
// __________________________________________________________________________________________
// ______________________________Splash_Screen_______________________________________________
// __________________________________________________________________________________________
class SplashScreen extends StatefulWidget {
const SplashScreen({super.key});
@override
State<SplashScreen> createState() => _SplashScreenState();
}
class _SplashScreenState extends State<SplashScreen> {
@override
void initState() {
super.initState();
Future.delayed(const Duration(seconds: 3), () {
LoginFunctionality().checkLoginStatus(ctx: context);
});
}
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: [
Color.fromRGBO(255, 253, 253, 0.73),
Color.fromARGB(130, 255, 17, 0),
],
),
),
child: Center(child: elsnerLogo()),
),
));
}
}
// __________________________________________________________________________________________
// ___________________________________Welcome_Screen_________________________________________
// __________________________________________________________________________________________
class Welcome extends StatelessWidget {
const Welcome({super.key});
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
elsnerLogo(),
const SizedBox(
height: 100,
),
const Text(
"Welcome!\n\nLet's find you some services.",
style: TextStyle(fontSize: 20),
),
const SizedBox(
height: 100,
),
// __________________________________________________________________________________________
// _________________________________Buttons__________________________________________________
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
InkWell(
onTap: () {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => const LoginScreen()),
);
},
child: Expanded(
child: Container(
alignment: Alignment.center,
height: 50,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.red.withOpacity(0.25),
blurRadius: 5,
blurStyle: BlurStyle.normal,
spreadRadius: 5)
],
color: const Color.fromARGB(255, 255, 7, 7),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"Login",
style: TextStyle(
fontSize: 15,
color: Color.fromARGB(255, 255, 255, 255),
fontWeight: FontWeight.bold),
),
),
),
),
const SizedBox(
width: 20,
),
InkWell(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => SignupScreen()));
},
child: Expanded(
child: Container(
alignment: Alignment.center,
height: 50,
width: 100,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.25),
blurRadius: 5,
blurStyle: BlurStyle.normal,
spreadRadius: 5,
// offset: ()
)
],
color: const Color.fromARGB(255, 53, 49, 35),
borderRadius: BorderRadius.circular(20),
),
child: const Text(
"Sign UP",
style: TextStyle(
color: Colors.white,
fontSize: 15,
fontWeight: FontWeight.bold,
),
),
),
),
),
],
),
// __________________________________________________________________________________________
// __________________________________________________________________________________________
],
),
),
),
),
);
}
}
// ________________________________________________________________________________________
// ________________________________________________________________________________________
// ________________________________________________________________________________________
Widget elsnerLogo() {
return const Row(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
"UN",
style: TextStyle(
shadows: [
Shadow(
color: Color.fromARGB(255, 209, 140, 140),
offset: Offset(1.0, 5.0),
blurRadius: 5)
],
decoration: TextDecoration.underline,
decorationColor: Colors.black,
decorationThickness: 2,
color: Colors.red,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
Text(
"BIND",
style: TextStyle(
shadows: [
Shadow(
color: Color.fromARGB(255, 109, 92, 92),
offset: Offset(1, 5),
blurRadius: 5)
],
decoration: TextDecoration.overline,
decorationColor: Colors.red,
decorationThickness: 2,
color: Colors.black,
fontSize: 50,
fontWeight: FontWeight.bold,
),
),
],
);
}
复制步骤:
1.使用flutter run在模拟器中运行应用程序。
1.观察UI是否正确显示。
1.使用flutter build apk
构建应用程序。
1.在物理设备上安装生成的APK。
1.在设备上启动应用程序。
1.注意,UI被破坏了。
预期行为:
UI应该是一致的,并且在物理设备上运行应用时显示为模拟器中的样子。
我试着研究这个问题,但没有找到任何相关的解决方案。任何指导或建议,什么可能导致这种差异的UI外观将不胜感激。谢谢你!
图片:
1条答案
按热度按时间57hvy0tb1#
在查看它时,我注意到一些可能导致模拟器和物理设备之间UI差异的潜在问题:
Expanded
widget的用法:Expanded widget应用作Flex
widget(如Row
或Column
)的子组件,以指示子组件应占用可用空间。在我的代码中,我使用Expanded
作为InkWell
的直接子元素,这可能会导致意外的布局行为。为了解决这个问题,我删除了扩展的小部件,让容器采用其自然宽度。硬编码尺寸:i为一些小部件提供了硬编码的尺寸,例如用于“登录”和“注册”按钮的
Container
。硬编码尺寸可能导致不同设备上的布局问题。考虑使用相对维度(例如,百分比或MediaQuery来获取屏幕大小),以使UI更具响应性。缺少关键参数:在我的代码中,MyApp、SplashScreen和Welcome小部件的构造函数有一个super.key参数,这似乎是一个错别字。应该是Key。但是,在本例中,由于我没有显式地使用key,因此可以完全删除key参数。