我正试图给给予2想象（他们是相同的形象）为应用程序我的工作全宽度（它必须是响应tho），但不是全长，这应该是很容易，我知道.但奇怪的是，在一个页面中，它可以工作，而另一个不行，虽然它们是完全相同的代码，除了一个（内容相关的）有一个container和gradientlinear。我不认为这是问题所在，但我不知道如果不是这样，会发生什么。
我试过很多方法（例如：改变宽度，删除fit: BoxFit.contain，heck甚至试图改变aspectRatio &添加我自己的宽度和长度而不是BoxFit.contain，以及整个AspectRatio）但什么都不起作用。我也已经尝试过重新启动我的调试服务（Chrome），并尝试了CNET +Shift+R（我想可能是缓存），但什么都没有。
请有人帮助，我不明白为什么它不工作，我觉得我要疯了BCS这样一个小东西。
我甚至提供了截图here，正如你所看到的，右边的有更多的空间。
这是第一个代码（工作代码）：
import 'package:flutter/material.dart';
import 'package:test_niyata_flutter/login/login_second.dart';
class Login1 extends StatelessWidget {
const Login1({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 20),
// Logo image
Image.asset(
'../assets/Images/Logo.png',
width: 126,
height: 38,
),
// Login1 image
Flexible(
fit: FlexFit.tight,
child: AspectRatio(
// 375 is the width of the image and 462.88 is the height of the image. This makes it scalable
aspectRatio: 375 / 462.88,
child: Image.asset(
'../assets/Images/Login1.png',
fit: BoxFit.contain,
),
),
),
Column(
children: [
// Text
const Text(
"Text here",
style: TextStyle(
fontFamily: 'Poppins',
fontWeight: FontWeight.w700,
fontSize: 17,
),
),
const SizedBox(height: 15),
const Text(
"""Another long
text here!""",
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Poppins',
fontSize: 14,
color: Colors.black,
fontWeight: FontWeight.w400,
),
),
const SizedBox(height: 20),
// Buttons
SizedBox(
height: 45,
width: 223,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Login2(),
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xffB9F5AA),
),
child: const Text(
"Let's go!",
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w400,
),
),
),
),
const SizedBox(height: 20),
SizedBox(
height: 45,
width: 223,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) =>
const Login2(), // HIER MOET NOG NAAR GEKEKEN WORDEN
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
),
child: const Text(
'Button',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.black,
fontSize: 17,
fontWeight: FontWeight.w400,
),
),
),
),
const SizedBox(height: 15),
],
),
],
),
),
),
),
);
}
}这是另一个，它不起作用：
import 'package:flutter/material.dart';
class Login2 extends StatefulWidget {
const Login2({super.key});
@override
State<Login2> createState() => _Login2State();
}
class _Login2State extends State<Login2> {
bool _obscureText = true;
String _emailError = ''; // Error message for email validation
String _passwordError = ''; // Error message for password validation
static const _emailRegex = r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$';
void _togglePasswordVisibility() {
setState(() {
_obscureText = !_obscureText;
});
}
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: SafeArea(
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const SizedBox(height: 20),
// Logo image
Image.asset(
'../assets/Images/Logo.png',
width: 126,
height: 38,
),
// Login1 image
Flexible(
fit: FlexFit.tight,
child: AspectRatio(
// 375 is the width of the image and 462.88 is the height of the image. This makes it scalable
aspectRatio: 375 / 462.88,
child: Image.asset(
'../assets/Images/Login1.png',
fit: BoxFit.contain,
),
),
),
Column(
children: [
Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [
Color.fromARGB(255, 185, 245, 170),
Colors.white,
],
),
),
padding: const EdgeInsets.all(20),
child: Column(
children: [
// This is to make the text and the underline stack with each other
Stack(
children: [
Positioned(
bottom: 2,
left: 0,
right: 0,
child: Container(
height: 1.0,
color: Colors.black,
),
),
// Text underline
Text(
"",
style: TextStyle(
inherit: false,
fontFamily: 'Poppins',
fontWeight: FontWeight.w700,
fontSize: 17,
foreground: Paint()
..style = PaintingStyle.stroke
..strokeWidth = 2),
),
// Text with color
const Text(
"Inloggen",
style: TextStyle(
inherit: false,
color: Colors.white,
fontFamily: 'Poppins',
fontWeight: FontWeight.w700,
fontSize: 17,
),
),
],
),
const SizedBox(height: 10),
// "Email" textfield
TextField(
style: const TextStyle(
fontFamily: 'Poppins',
fontSize: 17,
color: Color(0xFF8FA0B4),
),
onChanged: (value) {
setState(() {
final emailRegExp = RegExp(_emailRegex);
if (value.isEmpty) {
_emailError =
'Vul alstublieft uw e-mailadres in.';
} else if (!emailRegExp.hasMatch(value)) {
_emailError =
'Voer een geldig e-mailadres in.';
} else {
_emailError =
'Vul alstublieft uw e-mailadres in.';
}
});
},
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
enabled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 10),
labelText: 'Email',
errorText: _emailError,
),
),
// "Wachtwoord" textfield
TextField(
style: const TextStyle(
fontFamily: 'Poppins',
fontSize: 17,
color: Color(0xFF8FA0B4),
),
onChanged: (value) {
setState(() {
if (value.isEmpty) {
_passwordError =
'Vul alstublieft uw wachtwoord in.';
} else {
_passwordError =
'Vul alstublieft uw wachtwoord in.';
}
});
},
obscureText: _obscureText,
decoration: InputDecoration(
filled: true,
fillColor: Colors.white,
enabled: true,
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(10.0),
borderSide: BorderSide.none,
),
contentPadding:
const EdgeInsets.symmetric(horizontal: 10),
labelText: 'Wachtwoord',
errorText: _passwordError,
suffixIcon: GestureDetector(
onTap: _togglePasswordVisibility,
child: Icon(
_obscureText
? Icons.visibility
: Icons.visibility_off,
color: Colors.grey,
),
),
),
),
const SizedBox(height: 10),
// Buttons
SizedBox(
height: 45,
width: 223,
child: ElevatedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const Login2(),
),
);
},
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xffB9F5AA),
),
child: const Text(
'Inloggen',
style: TextStyle(
fontFamily: 'Poppins',
color: Colors.white,
fontSize: 17,
fontWeight: FontWeight.w400,
),
),
),
),
const SizedBox(height: 15),
],
),
),
],
),
],
),
),
),
),
);
}
}
1条答案
按热度按时间ao218c7q1#
我同意Dhafin Rayhan在评论中的观点，如果没有足够的垂直空间可用，则保持宽高比，但缩小整个图像。
解决方案一
相反，您可以尝试为您的图像使用不同的
BoxFit。如果使用BoxFit.fitWidth，它应该占用所有可用的水平空间，但如果可用空间不足，这会切断图像顶部和底部的一部分。使用BoxFit.cover将使它既适合水平，也适合垂直，但改变了纵横比。方案二
另一种选择是将整个视图放在
SingleChildScrollView中，这应该允许图像扩展到其完整大小，但如果内容不适合设备，则必须滚动，这可能导致按钮不可见。也不是一个真正的解决方案。测试问题
要测试/验证垂直空间不足是否确实是导致问题的原因：试着用不同长宽比的图像替换你的图像，比如16：9。这应该适合两个示例代码段的全宽，并留有一些垂直空间。或者你可以通过删除电子邮件字段来测试它，看看这是否会使图像再次扩展到全宽。