如何在 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

小部件之间有大尺寸的

SizedBox(height:110)

。这就是为什么你会得到很大的空间，你可以减少高度值，并使用

height: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),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

还有其他装饰可以使用，比如

OutlineInputBorder

。

您可以查看更多信息

• InputDecoration

• TextField