两个文件:account_page.dart & cart_page.dart
我使用Navigator.push将AccountPage() [来自account_page.dart ]嵌入到CartPage()中(在cart_page.dart内)。当我检查模拟时, Stack() 中的背景图像小部件会改变位置。
如何使 NavigationPage 与原始页面相同?这是一个错误吗?
我尝试了很多方法,包括将包含图像的 Container() 包装在 Positioned()、SizedBox()、'alignment: Alignment(x,y)' 中,添加一个将图像向下移动的列。其中大部分以图片完全消失而告终,我删除了参数以使图像尽可能自由,然后再次尝试无济于事。
最初,我使用 'alignment: Alignment(0.0, -7.0)' 来定位图像。但是,当使用 Navigator 调用页面时,图像对齐方式会从负向更改为正向,从而导致位置向相反方向移动。
我想到的其他解决方案需要一些 Photoshop,但我不想弄乱图像,除非我真的必须这样做。
我相信这与图像在堆栈中并导致一些溢出有关。
任何的意见都将会有帮助。
代码:
account_page.dart
import 'package:email_validator/email_validator.dart';
import 'package:flutter/material.dart';
class AccountPage extends StatefulWidget {
const AccountPage({Key? key}) : super(key: key);
@override
_AccountPageState createState() => _AccountPageState();
}
class _AccountPageState extends State<AccountPage> {
bool _obscureText = true;
bool _passswordVisible = false;
void _toggleObscureText() {
setState(() {
_obscureText = !_obscureText;
_passswordVisible = !_passswordVisible;
});
}
String? get _showHideString {
if (!_passswordVisible) {
return "Show";
} else {
return "Hide";
}
}
@override
Widget build(BuildContext context) {
// create a global key that can provide validation
final _formKey = GlobalKey<FormState>();
return Form(
key: _formKey,
child: Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
elevation: 0,
),
body: Stack(
children: [
Container(
//*****************AREA OF PROBLEM**************************
width: MediaQuery.of(context).size.width,
decoration: const BoxDecoration(
color: Colors.white,
image: DecorationImage(
image: AssetImage("images/background.jpeg"),
fit: BoxFit.fitWidth,
//---------sets the position of image------------
alignment: Alignment(0.0, -7.0),
),
),
),
SingleChildScrollView(
child: Column(
children: <Widget>[
const Padding(
padding: EdgeInsets.all(30.0),
child: Text(
"Sign in",
style: TextStyle(
fontFamily: "RaleWay",
fontSize: 30,
fontWeight: FontWeight.bold),
),
),
const Padding(
padding: EdgeInsets.only(left: 20, right: 20, bottom: 30),
child: Text(
"Become a member to enjoy exclusive savings on your favorite items.",
style: TextStyle(
fontSize: 16,
),
textAlign: TextAlign.center,
),
),
Stack(
children: <Widget>[
SingleChildScrollView(
child: Container(
padding: const EdgeInsets.symmetric(
horizontal: 20, vertical: 10),
child: Column(
children: [
TextFormField(
validator: (value) {
if (EmailValidator.validate(value!)) {
return null;
} else {
return "Please enter a valid Username";
}
},
autocorrect: false,
autofocus: false,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: 'UserName',
border: InputBorder.none,
filled: true,
fillColor: Colors.grey[200],
contentPadding: const EdgeInsets.all(10.0),
),
),
Padding(
padding: const EdgeInsets.symmetric(
vertical: 25,
),
child: Stack(children: <Widget>[
TextFormField(
autocorrect: false,
autofocus: false,
obscureText: _obscureText,
style: const TextStyle(fontSize: 18),
decoration: InputDecoration(
hintText: "Password",
filled: true,
fillColor: Colors.grey[200],
contentPadding:
const EdgeInsets.all(10.0),
),
),
Container(
alignment: Alignment.bottomRight,
child: TextButton(
onPressed: () {
_toggleObscureText();
},
child: Text(_showHideString!),
style: ButtonStyle(
overlayColor:
MaterialStateProperty.all(
Colors.transparent)
// MaterialStateProperty
// .resolveWith<Color?>(
// (Set<MaterialState> states) {
// if (states.contains(
// MaterialState.pressed)) {
// return Theme.of(context)
// .colorScheme
// .primary
// .withOpacity(0);
// }
// }),
),
))
]),
),
Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
TextButton(
child: const Text(
"Forgot Password?",
style: TextStyle(
decoration: TextDecoration.underline,
),
),
onPressed: () {},
style: ButtonStyle(
overlayColor:
MaterialStateProperty.all<Color>(
Colors.transparent,
)),
),
],
),
RawMaterialButton(
onPressed: () {
// ignore: todo
// TODO: Checks if username and password is in the system, this will bring to real account page
// if not, replies, please enter a valid username and password
if (_formKey.currentState!.validate()) {
ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
content: Text("Submitted!"),
),
);
}
},
constraints:
const BoxConstraints(minWidth: 300),
splashColor: Colors.black12,
fillColor: Colors.black,
padding:
const EdgeInsets.symmetric(vertical: 12),
child: const Text(
"Login",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold),
),
),
],
),
),
),
],
)
],
),
),
],
),
),
);
}
}
cart_page.dart
import 'package:flutter/material.dart';
import 'package:flutter_mobile_sim_test_1/account_page.dart';
class CartPage extends StatefulWidget {
const CartPage({Key? key}) : super(key: key);
@override
_CartPageState createState() => _CartPageState();
}
class _CartPageState extends State<CartPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: const Text(
"Your Cart",
style: TextStyle(fontSize: 24, color: Colors.black),
),
elevation: 0,
backgroundColor: Colors.white,
),
body: Padding(
padding: const EdgeInsets.symmetric(horizontal: 15),
child: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Container(
width: MediaQuery.of(context).size.width,
height: 100,
alignment: Alignment.center,
padding: const EdgeInsets.all(10.0),
child: const Text(
"Your Shopping Bag is Empty",
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
),
),
RawMaterialButton(
child: const Text("Sign In",
style: TextStyle(
color: Colors.white,
fontSize: 18,
fontWeight: FontWeight.bold)),
//*****************NAVIGATOR PUSH**************************
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => const AccountPage()),
);
},
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: 20),
padding: const EdgeInsets.all(12.0),
fillColor: Colors.black,
),
Stack(
children: [
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: MediaQuery.of(context).size.width,
child: const Divider(
color: Colors.grey,
thickness: 2,
),
),
),
Container(
color: Colors.transparent,
width: (MediaQuery.of(context).size.width),
alignment: Alignment.topCenter,
padding: const EdgeInsets.all(8.0),
child: Container(
color: Colors.white,
width: 40,
child: const Text(
"or",
style: TextStyle(
fontSize: 18,
color: Colors.grey,
),
textAlign: TextAlign.center,
),
),
),
],
),
RawMaterialButton(
onPressed: () {},
child: const Text("Create Account",
style: TextStyle(
fontSize: 18, fontWeight: FontWeight.bold)),
fillColor: Colors.white,
shape: const ContinuousRectangleBorder(
side: BorderSide(color: Colors.black, width: 2),
),
constraints: BoxConstraints(
minWidth: MediaQuery.of(context).size.width,
minHeight: 20.0),
padding: const EdgeInsets.all(12.0)),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width,
height: 200,
alignment: Alignment.center,
padding: const EdgeInsets.all(20.0),
// child: ,
),
const Text(
"hello",
style: TextStyle(fontSize: 50),
textAlign: TextAlign.center,
),
Container(
color: Colors.blue,
width: MediaQuery.of(context).size.width,
height: 200,
alignment: Alignment.center,
padding: const EdgeInsets.all(20.0),
// child: ,
),
],
),
),
));
}
}