enter image description here

我想把‘请登录以继续’和‘用户名’之间的间距设置为相对于父高度的文本字段.到目前为止,它被固定在100.如何在Flutter 翼中做到这一点?我已try 在具有heightFactor的父列视图上使用FractionalSizedBox,但当键盘出现时,父列内的子级溢出父视图.

以下是代码->

import 'package:flutter/material.dart';
    import 'package:google_fonts/google_fonts.dart';
    import 'package:reflux_tracker/constants/app_color.dart';
    
    class LoginScreen extends StatefulWidget {
      const LoginScreen({super.key});
    
      @override
      State<StatefulWidget> createState() {
        return _LoginScreenState();
      }
    }
    
    class _LoginScreenState extends State<LoginScreen> {
      // Properties
      String username = "";
      String password = "";
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: Center(
            child: Container(
                margin: const EdgeInsets.symmetric(horizontal: 30),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: [
                        Text("Hello There",
                            style: GoogleFonts.lato(
                                color: AppColors.primaryColor, fontSize: 34)),
                        const Text(
                          "Please sign in to continue.",
                          style: TextStyle(
                            fontFamily: "RobotoSlab-Light",
                            fontSize: 18,
                            color:
                                AppColors.textColor, // Adjust the color as needed
                          ),
                        ),
                      ],
                    ),
                    Container(height: 100,),  
                    Column(
                      children: [
                        // Username
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextField(
                              decoration: const InputDecoration(
                                labelText: "Username",
                                labelStyle: TextStyle(
                                  fontFamily: "RobotoSlab-Light",
                                  fontSize: 18,
                                  color: AppColors.textColor,
                                ),
                              ),
                              onChanged: (value) {
                                setState(() {
                                  username = value;
                                });
                              },
                            ),
                          ],
                        ),
    
                        // Password
                        Column(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: [
                            TextField(
                              obscureText: true,
                              decoration: const InputDecoration(
                                labelText: "Password",
                                labelStyle: TextStyle(
                                  fontFamily: "RobotoSlab-Light",
                                  fontSize: 18,
                                  color: AppColors.textColor,
                                ),
                              ),
                              onChanged: (value) {
                                setState(() {
                                  password = value;
                                });
                              },
                            ),
                          ],
                        ),
                      ],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: [
                        TextButton(
                          onPressed: () {
                            // Handle forgot password logic
                          },
                          child: const Text(
                            "Forgot Password?",
                            style: TextStyle(
                              fontFamily: "RobotoSlab-Light",
                              fontSize: 14,
                              color: AppColors.textColor,
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 16),
    
                    // Button
                    GestureDetector(
                      onTap: () {
                        // Handle login logic
                      },
                      child: Container(
                        width: 60,
                        height: 60,
                        decoration: const BoxDecoration(
                          shape: BoxShape.circle,
                          color:
                              AppColors.primaryColor, // Adjust the color as needed
                        ),
                        child: const Icon(
                          Icons.arrow_right,
                          size: 40,
                          color: AppColors.backgroundColor,
                        ),
                      ),
                    ),
                    const SizedBox(height: 35),
    
                    // Sign Up
                    TextButton(
                      onPressed: () {
                        // Handle sign up logic
                      },
                      child: const Text(
                        "Sign up, if you’re new!",
                        style: TextStyle(
                          fontFamily: "RobotoSlab-Light",
                          fontSize: 18,
                          color: AppColors.textColor,
                        ),
                      ),
                    ),
                    const SizedBox(height: 30),
                  ],
                )),
          ),
        );
      }
    }

推荐答案

最简单的方法不是硬编码100,您可以这样做:

static const userNameTopMarginRatio = 0.2;
...
Container(height: MediaQuery.sizeOf(context).height * userNameTopMarginRatio);

您可以自己 Select 一个更精确的屏幕高度比率.

Ios相关问答推荐

Jenkins node 无法运行fastlane命令-未找到命令

如何在react 本机模块中使用Bundle.main.Path()在SWIFT中导入assets资源

有没有办法将滚动视图RTL(阿拉伯语)与Ltr动画一起使用?

objc[25442]:Swift类的扩展和类别不允许有+load方法

clang:错误:SDK 路径中不包含libarclite

SwiftUI:.toolbar 不适用于 UITextView

SwiftUI 故障/错误 - 在 LazyVStack 和 ScrollView 中使用 AVPlayer 时状态栏不显示

Apollo iOS 客户端代码生成:错误:无法查询字段

在 SwiftUI 中使用 .rotation3DEffect 在视图之间翻转

叠加视图不在堆栈中维护自身 - SwiftUI

撤销 Apple 登录令牌以进行帐户删除过程

帧过渡动画有条件地工作

Swiftui为什么在点击第二行之前背景不起作用

无法为 Flutter 项目构建 ipa [CocoaPods 找不到 pod "GoogleAppMeasurement" 的兼容版本:]

Apple Push Service 证书不受信任

如何在保持纵横比的同时zoom UIView 的内容以适应目标矩形?

CocoaPods 找不到 podFirebase/Core的兼容版本 | cloud_firestore, Flutter

iPhone iOS 无法正确显示 box-shadow

@IBDesignable 崩溃代理

iOS7 UITextView contentsize.height 替代