0

两个文件:account_page.dart & cart_page.dart

我使用Navigator.pushAccountPage() [来自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: ,
                ),
              ],
            ),
          ),
        ));
  }
}

正确定位的背景图像(黑色无穷大)

NavigatorPage 中的背景图像定位不正确(黑色无穷大)

4

0 回答 0