Flutter TextField和Button组件开发登录页面案例

In this section, we’ll go through building a basic login screen using the Button and TextField widgets. We’ll follow a step-bystep approach, allowing you to code along and understand each part of the process. Let’s get started!

在本节中,我们将使用“Button”和“TextField”小部件构建一个基本的登录屏幕。我们将遵循一步一步的方法,允许您编写代码并理解过程的每个部分。我们开始吧!

Scenario: Creating a Login Screen

场景:创建登录界面

Imagine you’re building a mobile app that requires user authentication. You want users to be able to log in securely, so you need to design a login screen. This screen should include fields for users to enter their username and password, along with a “Login” button to initiate the authentication process. Additionally, you want to ensure that the password remains hidden as users type it.

假设您正在构建一个需要用户身份验证的移动应用程序。您希望用户能够安全登录,因此需要设计一个登录屏幕。该屏幕应该包括供用户输入用户名和密码的字段,以及用于启动身份验证过程的“Login”按钮。此外,您希望确保在用户键入密码时保持隐藏。

Step 1: Setting Up Your Project

步骤1:设置项目

Before we begin, make sure you have your Flutter project set up. If you haven’t done this yet, refer to previous sections for guidance.

在我们开始之前,确保你有你的Flutter项目设置。如果您还没有这样做,请参考前面的部分以获得指导。

Step 2: Building the Login Screen

步骤 2:创建登录屏幕

Open lib/main.dart: Open the lib/main.dart file in yourproject.

打开 lib/main.dart: 在您的项目中打开 lib/main.dart 文件。

Import Required Packages: Make sure you have thenecessary package imports at the top of the file:

导入所需软件包: 确保在文件顶部有必要的软件包导入:

import ‘package:flutter/material.dart’;

Create the Main Function: Replace the existing main function with the following code:

创建主函数: 用以下代码替换现有的 main 函数:

void main() {
	runApp(MyApp());
}

Create MyApp Class: Define the MyApp class as follows:

创建 MyApp 类: 定义 MyApp 类如下:

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "用户登录",
      home: LoginScreen(),
    );
  }
}

Create LoginScreen Class: Now, let’s create the LoginScreen class inside the lib folder. This will be the main screen of our app:

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("用户登录"),
      ),
      body: Center(
          child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[],
        ),
      )),
    );
  }
}

Add TextFields and Button: Inside the Column widget, add the following code to create two TextField widgets for username and password inputs, and an ElevatedButton for login:

添加文本字段和按钮: 在 “列 ”部件中添加以下代码,创建两个用于输入用户名和密码的 TextField 部件,以及一个用于登录的 ElevatedButton:

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  children: <Widget>[
    const TextField(
      decoration: InputDecoration(labelText: "账号"),
    ),
    const SizedBox(height: 20),
    const TextField(
      decoration: InputDecoration(labelText: "密码"),
      obscureText: true,
    ),
    const SizedBox(height: 20),
    ElevatedButton(
      onPressed: () {
        // Add your login logic here
      },
      child: const Text("登录"),
    ),
  ],
),

此时main.dart的完整代码如下:

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "用户登录",
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("用户登录"),
      ),
      body: Center(
          child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                const TextField(
                  decoration: InputDecoration(labelText: "账号"),
                ),
                const SizedBox(height: 20),
                const TextField(
                  decoration: InputDecoration(labelText: "密码"),
                  obscureText: true,
                ),
                const SizedBox(height: 20),
                ElevatedButton(
                  onPressed: () {
                    // Add your login logic here
                  },
                  child: const Text("登录"),
                ),
              ],
            ),
          ],
        ),
      )),
    );
  }
}

效果预览如下:

在这里插入图片描述

Step 3: Exploring the Code

步骤 3:探索代码

Inside the LoginScreen widget, we’ve added two TextField widgets for username and password input, along with a SizedBox to create spacing.

在 LoginScreen 部件中,我们添加了两个用于输入用户名和密码的 TextField 部件,以及一个用于创建间距的 SizedBox。

TextField (Username Input): The first TextField widget allows users to enter their username. We’ve used the decoration property with the InputDecoration class to provide a visual hint (label) inside the text field. The labelText parameter sets the label for the text field, helping users understand what to enter.

TextField(用户名输入): 第一个 TextField 部件允许用户输入用户名。我们使用 InputDecoration 类的装饰属性在文本字段内提供视觉提示(标签)。labelText 参数设置了文本字段的标签,帮助用户了解要输入的内容。

TextField (Password Input): The second TextField widget is used for password input. For security reasons, we’ve set the obscureText property to true. This property hides the entered text, displaying it as dots, asterisks, or other obscured characters. This way, sensitive information like passwords remains hidden.

TextField(密码输入): 第二个 TextField widget 用于密码输入。出于安全考虑,我们将 obscureText 属性设置为 true。该属性会隐藏输入的文本,显示为点、星号或其他模糊字符。这样,像密码这样的敏感信息就会被隐藏起来。

SizedBox: This widget creates a space between the text fields and the button, providing visual separation and improving the layout. The height parameter in SizedBox sets the amount of vertical space between widgets.

SizedBox: 该部件可在文本字段和按钮之间创建一个空间,提供视觉分隔并改善布局。SizedBox 中的高度参数设置了部件之间的垂直空间大小。

ElevatedButton: This widget serves as the login button. For now, the onPressed property is empty. You can later add your login logic here.

ElevatedButton: 该部件用作登录按钮。目前,onPressed 属性为空。您可以稍后在此处添加登录逻辑。

Step 4: Run Your App

步骤 4:运行应用程序

Save your changes and run the app using the command:

保存更改并使用命令运行应用程序:

flutter run

Step 5: Exploring the Login Screen

步骤 5:探索登录屏幕

As the app launches, you’ll see a simple login screen with fields for entering a username and password, along with a “Login” button. Although the button doesn’t currently perform any action, this example provides a foundation for adding authentication logic and creating a functional login experience.

应用程序启动后,您会看到一个简单的登录屏幕,上面有输入用户名和密码的字段,以及一个 “登录 ”按钮。虽然按钮目前不执行任何操作,但这个示例为添加身份验证逻辑和创建功能性登录体验奠定了基础。

代码优化

之前的代码有一个不必要的Column组件嵌套, 去掉后改写如下:

import "package:flutter/material.dart";

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: "用户登录",
      home: LoginScreen(),
    );
  }
}

class LoginScreen extends StatelessWidget {
  const LoginScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("用户登录"),
      ),
      body: Center(
          child: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            const TextField(
              decoration: InputDecoration(labelText: "账号"),
            ),
            const SizedBox(height: 20),
            const TextField(
              decoration: InputDecoration(labelText: "密码"),
              obscureText: true,
            ),
            const SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // Add your login logic here
              },
              child: const Text("登录"),
            ),
          ],
        ),
      )),
    );
  }
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/900855.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

NVIDIA发布Nemotron-70B-Instruct,超越GPT-4o和Claude 3.5的AI模型

一、Nemotron-70B-Instruct 是什么 Nemotron-70B-Instruct 是由 NVIDIA 基于 Meta 的 Llama 3.1-70B 模型开发的先进大语言模型&#xff08;LLM&#xff09;。该模型采用了新颖的神经架构搜索&#xff08;Neural Architecture Search&#xff0c;NAS&#xff09;方法和知识蒸馏…

【华为HCIP实战课程二十】OSPF特殊区域NSSA配置详解,网络工程师

一、NSSA&#xff08;Not So Stubby Area&#xff09;区域 在NSSA区域内可以拥有ASBR&#xff0c;并且重分发进入OSPF的路由是以7类LSA形式存在&#xff0c;该类型的LSA只能存在于NSSA区域内不接收5类LSA&#xff0c;ABR过滤外部进入该区域的4 5类LSA&#xff0c;可以引入外部…

题解 力扣 LeetCode 739 每日温度 C++

题目传送门&#xff1a; 739. 每日温度 - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/daily-temperatures/description/ 思路&#xff1a; 就是单调栈的思路&#xff0c;具体见代码 不知道单调栈的&#xff0c;可以看我的这篇文章&#xff1a; 数…

web3对象如何连接以太网络节点

实例化web3对象 当我们实例化web3对象&#xff0c;我们一般开始用本地址&#xff0c;如下 import Web3 from web3 var web3 new Web3(Web3.givenProvider || ws://localhost:5173)我们要和以太网进行交互&#xff0c;所以我们要将’ws://localhost:5173’的本地地址换成以太…

【Linux学习】(6)编译器gcc/g++

前言 本节重点&#xff1a;掌握gcc/g编译器的使用&#xff0c;并了解其过程&#xff0c;原理 一、Linux编译器-gcc/g使用 1. gcc/g的基本使用 在前面我们学习了vim&#xff0c;知道如何在Linux中编写代码。但又是如何编译代码的&#xff1f;——在Linux中我们编译代码使用的是…

UDP(用户数据报协议)端口监控

随着网络的扩展&#xff0c;确保高效的设备通信对于优化网络功能变得越来越重要。在这个过程中&#xff0c;端口发挥着重要作用&#xff0c;它是实现外部设备集成的物理连接器。通过实现数据的无缝传输和交互&#xff0c;端口为网络基础设施的顺畅运行提供了保障。端口使数据通…

Linux中安装配置SQLite3,并实现C语言与SQLite3的交互。

前言 SQLite 是一个软件库&#xff0c;实现了自给自足的、无服务器的、零配置的、事务性的 SQL 数据库引擎。SQLite 是在世界上最广泛部署的 SQL 数据库引擎。本次实验介绍在Linux上实现C语言和SQLite3的交互&#xff0c;利用C语言编写相关语句&#xff0c;连接数据库、操作数…

【数据结构初阶】二叉树---堆

二叉树-堆的实现 一、树的概念&#xff08;什么是树&#xff09;二、二叉树的概念及结构2.1 二叉树的概念2.2 二叉树的性质2.3 二叉树存储结构 三、二叉树的顺序结构3.1 堆的概念及结构3.2 堆的向下调整算法3.3堆的创建 四、堆的代码实现4.1 堆的初始化4.2 堆的销毁4.3 堆的插入…

如何从iconfont中获取字体图标并应用到微信小程序中去?

下面我们一一个微信小程序的登录界面的制作为例来说明&#xff0c;如何从iconfont中获取字体图标是如何应用到微信小程序中去的。首先我们看效果。 这里所有的图标&#xff0c;都是从iconfont中以字体的形式来加载的&#xff0c;也就是说&#xff0c;我们自始至终没有使用一张…

jenkins 自动化部署Springboot 项目

一、安装docker 1.更新yum命令 yum -y update2.查看机器有残留的docker服务&#xff0c;有就卸载干净 查看docker 服务 rpm -qa |grep docker卸载docker sudo yum remove docker-ce docker-ce-cli containerd.io sudo rm -rf /var/lib/docker sudo rm -rf /var/lib/contai…

linux下的进程等待(wait、waitpid)

目录 引言 进程等待的必要性 见见猪跑&#xff1a;是什么 怎么办 多个子进程时 阻塞等待 非阻塞轮询 参数一&#xff1a; 参数二 进程等待的原理 进程退出相关的宏 第三个参数option&#xff08;设置等待的方式&#xff09; 引言 在Linux操作系统中&#xff0c;进程…

Jmeter实际应用

环境准备 JDK1.8Jmeter 5.6.3 下载地址Jmeter 插件 下载地址 放到lib/ext下 常用命令 # 启动 sh jmeter# 集群模式下启动节点&#xff0c;不启动用不了集群 sh jmeter-server#生成ssl需要的证书, 这里会要求输入个密码&#xff0c;是要在jmeter中用的 keytool -import -ali…

Claude Financial Data Analyst:基于Claude的金融数据分析工具!免费开源!

大家好&#xff0c;我是木易&#xff0c;一个持续关注AI领域的互联网技术产品经理&#xff0c;国内Top2本科&#xff0c;美国Top10 CS研究生&#xff0c;MBA。我坚信AI是普通人变强的“外挂”&#xff0c;专注于分享AI全维度知识&#xff0c;包括但不限于AI科普&#xff0c;AI工…

基于SSM+小程序的垃圾分类管理系统(垃圾2)

&#x1f449;文末查看项目功能视频演示获取源码sql脚本视频导入教程视频 1、项目介绍 基于SSM小程序的垃圾分类管理系统实现了管理员及用户。 1、管理员功能结构图&#xff0c;管理员功能有个人中心&#xff0c;管理员管理&#xff0c;基础数据管理、论坛管理、垃圾信息管理…

钰泰ETA4553电压电平转换器IC

描述 ETA4553 是两位同相转换器&#xff0c;是一种双向电压电平转换器&#xff0c;可用于建立混合电压系统之间的数字开关兼容性。它使用两个独立的可配置电源轨&#xff0c;A 端口支持 1.65V 至 5.5V 的工作电压&#xff0c;同时跟踪 VCCA 电源&#xff0c;B 端口支持 2.3V 至…

QT QDialog::exec()调用时清除部件所有焦点

最近在做项目时&#xff0c;遇到一个问题&#xff1a;在统信UOS系统编写的QT程序&#xff0c;其中进入某些页面时&#xff0c;或者显示模态窗时&#xff0c;按钮都会有一个焦点框&#xff0c;这个是不允许的&#xff0c;于是乎&#xff0c;开始了清理焦点的旅途。 一、清理QDia…

高速自爆穿梭无人机技术详解

高速自爆穿梭无人机技术是一种结合了高速飞行与自爆式攻击能力的先进无人机技术。以下是对该技术的详细解析&#xff1a; 一、技术特点 1. 高速飞行&#xff1a; 高速自爆穿梭无人机通常具备极高的飞行速度&#xff0c;如部分型号的速度可达到174公里/小时&#xff0c;甚至更…

五,Linux基础环境搭建(CentOS7)- 安装Kafka

Linux基础环境搭建&#xff08;CentOS7&#xff09;- 安装Kafka 大家注意以下的环境搭建版本号&#xff0c;如果版本不匹配有可能出现问题&#xff01; 一、Kafka下载及安装 Kafka是由Apache软件基金会开发的一个开源流处理平台&#xff0c;由Scala和Java编写。Kafka是一种高…

[ARC159D] LIS 2 题解

[ARC159D] LIS 2 题面&#xff1a; 题面翻译 给定 n n n 个操作&#xff0c;每次操作给出 l , r l,r l,r&#xff0c;并在 a a a 序列里依次添加 i ∈ [ l , r ] i\in[l,r] i∈[l,r]。 求最后 a a a 的最长上升子序列。 题目描述 数列 $ X $ があります。初め、$ X $ は空…

网络搜索引擎Shodan(1)

声明&#xff1a;学习视频来自b站up主 泷羽sec&#xff0c;如涉及侵权马上删除文章 感谢泷羽sec 团队的教学 视频地址&#xff1a;shodan(1)_哔哩哔哩_bilibili 本文主要讲解网络搜索引擎Shodan的一些用法&#xff08;host和search这两个命令&#xff09;。 Shodan 是一个网络…