如何在Flutter布局中创建可编辑的输入字段？

Question

我正在用flutter构建一个登录屏幕，并希望用字段替换下划线（“ ___________”），用户可以输入其电子邮件和密码。这是一个视觉表示：

预期的结果：

当前代码：

class LogInEnterEmailPassword extends StatefulWidget {
  const LogInEnterEmailPassword({Key? key}) : super(key: key);

  @override
  State<LogInEnterEmailPassword> createState() => _LogInEnterEmailPasswordState();
}

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xffF6F6F6),
      body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Text("Enter email",
            style: TextStyle(
              fontSize: 20,
              fontStyle: FontStyle.normal,
              fontWeight:  FontWeight.normal,
              color: Color(0xff3B3B3B),
            ),),
              SizedBox(height: 20,),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xffD7D7D7),
                  
                ),),

              SizedBox(height: 110,),
              Text("Enter password",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xff3B3B3B),

                ),),
              SizedBox(height: 25,),
              Text("______________________________",
                style: TextStyle(
                  fontSize: 20,
                  fontStyle: FontStyle.normal,
                  fontWeight:  FontWeight.normal,
                  color: Color(0xffD7D7D7),

                ),),
              SizedBox(height: 110,),
              Icon(Icons.arrow_forward,
              size: 40,
                color: Color(0xff7E7E7E),)
            ],

          ),

      )
    );
  }
}

其他注释：

• 我目前专注于前端设计。
• 我正在考虑稍后的后端node.js。

Answer 1

您的大小尺寸大小（高度：110）之间的小部件之间。这就是为什么要获得较大空间的原因，可以降低高度值，并使用高度播放：x值。

还使用crossaxisalignment：crossaxisalignment.start，在column（）

更新：更新：进行用户输入，使用textfield

class _LogInEnterEmailPasswordState extends State<LogInEnterEmailPassword> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xffF6F6F6),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: const [
            TextField(
              decoration: InputDecoration(
                hintText: "email",
                border: OutlineInputBorder(),
              ),
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
            SizedBox(
              height: 10,
            ),
            TextField(
              decoration: InputDecoration(
                hintText: "Enter password",
                border: OutlineInputBorder(),
              ),
              style: TextStyle(
                fontSize: 20,
                fontStyle: FontStyle.normal,
                fontWeight: FontWeight.normal,
                color: Color(0xff3B3B3B),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

还有其他装饰可以像utlineInputborder一样使用。

您可以查看有关

• 的 更多信息a href =“ https://api.flutter.dev/flutter/material/textfield-class.html” rel =“ nofollow noreferrer”> textfield