如何针对屏幕布局优化我的颤振代码?

时间:2021-07-13 09:43:55

标签: flutter dart flutter-layout

我正在创建一个 flutter 登录页面,我面临的问题是我的页面内容不适合页面本身,并且当我单击文本字段时,页面不会自动向上滚动。下面是我设计的图片。

enter image description here

通过我的代码,enter image description here 我得到下面的页面,页面中隐藏了“By Phandas Studio”。

这是我的代码如下:

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFFE0E0E0),
      body: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 35.0),
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              const SizedBox(height: 137.0),
              Container(
                height: 141.0,
                width: 129.0,
                decoration: const BoxDecoration(
                  image: DecorationImage(
                    image: AssetImage(
                      'assets/MediaPlus-01.png',
                    ),
                    fit: BoxFit.fill,
                  ),
                  //shape: BoxShape.circle,
                  //backgroundBlendMode: ,
                ),
              ),
              const SizedBox(height: 15.0),
              const Text(
                "WELCOME!",
                style: TextStyle(
                  color: Color(0xFF4F4F4F),
                  fontSize: 36,
                  fontWeight: FontWeight.bold,
                ),
              ),
              const SizedBox(height: 15.0),
              Form(
                child: Column(
                  children: <Widget>[
                    myTextField(
                      helpText: 'Enter your email',
                      hintText: 'Enter your email',
                      prefixIcon: Icons.email,
                    ),
                    const SizedBox(height: 26.0),
                    myTextField(
                        helpText: 'Enter your password',
                        hintText: 'Enter your password',
                        isPassword: true,
                        prefixIcon: Icons.lock),
                    const SizedBox(height: 13.0),
                    /*TextButton(
                      onPressed: () {},
                      child: const Text(
                        "ForgotPassword",
                        style: TextStyle(
                          color: Color(0xFF4F4F4F),
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                     */
                    RichText(
                      text: TextSpan(
                          text: "ForgotPassword",
                          style: TextStyle(
                            color: Color(0xFF4F4F4F),
                            fontSize: 16,
                            fontWeight: FontWeight.bold,
                          ),
                          recognizer: TapGestureRecognizer()
                            ..onTap = () {
                              print(Navigator.pushReplacementNamed(
                                  context, '/SignupPage'));
                            }),
                    ),

                    const SizedBox(height: 12.0),
                    myButton("LOGIN", "SignupPage"),
                    //testButton(),
                    const SizedBox(height: 18.0),
                    RichText(
                      text: TextSpan(
                        text: "Don't have an account?",
                        style: TextStyle(
                          color: Color(0xFF4F4F4F),
                          fontSize: 16.0,
                        ),
                        children: [
                          TextSpan(
                              text: " Sign Up.",
                              style: TextStyle(
                                color: Color(0xFFEB5757),
                              ),
                              recognizer: TapGestureRecognizer()
                                ..onTap = () {
                                  print(Navigator.pushReplacementNamed(
                                      context, '/SignupPage'));
                                }
                              //recognizer: TapGestureRecognizer()..onTap(){};
                              ),
                        ],
                      ),
                    ),
                    const SizedBox(height: 18.0),
                    TextButton(
                      onPressed: () {},
                      child: const Text(
                        "Terms of Use / Privacy Policy",
                        style: TextStyle(
                          color: Color(0xFF4F4F4F),
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    const SizedBox(
                      height: 100.0,
                    ),
                    RichText(
                      text: const TextSpan(
                        text: "By",
                        style: TextStyle(
                          color: Color(0xFF4F4F4F),
                          fontSize: 16.0,
                        ),
                        children: [
                          TextSpan(
                            text: " Phanda Studio.",
                            style: TextStyle(color: Color(0xFFEB5757)),
                          ),
                        ],
                      ),
                    ),
                    const SizedBox(
                      height: 10.0,
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

还将整个应用程序包装在 ScreenUtilInit 中:

void main() => runApp(
      ScreenUtilInit(
        builder: () => MaterialApp(initialRoute: '/LoginPage', routes: {
          '/': (context) => const HomePage(),
          '/LoginPage': (context) => const LoginPage(),
          '/SignupPage': (context) => const SignupPage(),
        }),
        //designSize: const Size(414, 896),
      ),
    );

0 个答案:

没有答案