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("登录"),),],),)),);}
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

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

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

【web安全】缓慢的HTTP拒绝服务攻击详解

文章目录 前言一、攻击原理二、攻击类型三、攻击特点四、HTTP慢速攻击实战工具简介使用参数介绍五、修复建议前言 缓慢的HTTP拒绝服务攻击是一种专门针对于Web的应用层拒绝服务攻击,攻击者操纵网络上的肉鸡,对目标Web服务器进行海量http request攻击,直到服务器带宽被打满,造成…

【数据结构】概念篇

专栏说明&#xff1a;本专栏用于数据结构复习&#xff0c;文章中出现的代码由C语言实现&#xff0c;在专栏中会涉及到部分OJ题目&#xff0c;如对你学习有所帮助&#xff0c;可以点赞鼓励一下博主喔&#x1f493; 博客主页&#xff1a;Duck Bro 博客主页系列专栏&#xff1a;数…

python实战(一)——iris鸢尾花数据集分类

一、任务背景 本文是python实战系列专栏的第一篇文章&#xff0c;我们将从分类开始由浅入深逐步学习如何使用python完成常规的机器学习/深度学习任务。iris数据集是经典的机器学习入门数据集&#xff0c;许多分类任务教程都会以这个数据集作为示例&#xff0c;它的数据量是150条…

用STM32硬件思维学JAVA--23种设计模式

系列文章目录 1.【软考之软件设计师】PPT课件 2.【软考之软件设计师】学习笔记 3.【软考之软件设计师】上午题—信管网(每天更新) 4.【软考之软件设计师】上午题—希赛网(每天更新) 5.【软件设计师真题】下午题第一大题—数据流图设计 6.【软件设计师真题】下午题第二大题…

C++20中头文件syncstream的使用

<syncstream>是C20中新增加的头文件&#xff0c;提供了对同步输出流的支持&#xff0c;即在多个线程中可安全地进行输出操作&#xff0c;此头文件是Input/Output库的一部分。包括&#xff1a; 1.std::basic_syncbuf&#xff1a;是std::basic_streambuf的包装器(wrapper)&…

深度学习实战项目】基于OPenCV的人脸识别考勤系统软件开发【python源码+UI界面+功能源码详解】

背景及意义 人脸识别&#xff08;Face Recognition&#xff09;是基于人的脸部特征信息进行身份识别的一种生物识别技术&#xff0c;可以用来确认用户身份。本文详细介绍了人脸识别基本的实现原理&#xff0c;并且基于python与pyqt开发了人脸识别与信息管理软件&#xff0c;主要…

R语言机器学习教程大纲

文章目录 介绍机器学习算法监督学习Supervised Learning分类Classification回归Regression 无监督学习 Unsupervised Learning聚类 Clustering降纬 Dimensionality Reduction相关Association 强化学习Reinforcement Learning模型自由 Model-Free Methods模型驱动 Model-Based M…

猎板高频PCB技术深度解析与设计实践指南

高频PCB&#xff08;印刷电路板&#xff09;设计是电子工程领域的一项关键技术&#xff0c;特别是在通信、雷达、卫星导航等高速数据传输和信号处理应用中。本文档旨在提供一份聚焦的高频PCB技术资料&#xff0c;涵盖设计原则、材料选择、布线策略、接地与屏蔽、阻抗控制以及制…

51单片机——OLED显示图片

取模软件&#xff1a;链接:https://pan.baidu.com/s/1UcrbS7nU4bsawNxsaaULfQ 提取码:gclc 1、如果图片大小和格式不合适&#xff0c;可以先用Img2Lcd软件进行调整图片大小&#xff0c;一般取模软件使用的是.bmp图片&#xff0c;可以进行输出.bmp格式。软件界面如下&#xff1…

创建型模式-----建造者模式

目录 背景&#xff1a; 构建模式UML 代码示例 房子成品&#xff1a; 构建器抽象&#xff1a; 具体构建器&#xff1a; 建筑师&#xff1a; 测试部…

Rust小练习,编写井字棋

画叉画圈的游戏通常指的是 井字棋&#xff08;Tic-Tac-Toe&#xff09;&#xff0c;是一个简单的两人游戏&#xff0c;规则如下&#xff1a; 游戏规则 棋盘&#xff1a;游戏在一个3x3的方格上进行。玩家&#xff1a;有两个玩家&#xff0c;一个用“X”表示&#xff0c;另一个…

VScode远程开发之remote 远程开发(二)

VScode远程开发之remote 远程开发&#xff08;二&#xff09; 使用vscode进行远程开发很简单&#xff0c;在拓展里搜索 Remote Development&#xff0c;就可以搜索到微软提供的远程开发大礼包&#xff0c;里面包含了 通过 SSH 远程服务器 远程容器 远程 WSL&#xff08;Win…

凯伦股份荣获中国钢结构协会2024年度技术创新奖

10月21-22日&#xff0c;中国钢结构协会成立40周年纪念大会暨2024中国钢结构大会在北京市召开。会议举行了纪念中国钢结构协会成立40周年颁奖&#xff0c;对中国钢结构协会科学技术进步奖、技术创新奖进行了颁奖。由凯伦股份完成的“高分子卷材金属复合板及工程应用”项目荣获2…

微信小程序canvas 生成二维码图片,画图片,生成图片,将两个canvas结合并保存图片

**需求实现步骤如下 先定义两个canvas一个canvas myQrcode画二维码的图片另一个canvas mycanvas画一个背景图&#xff0c;并把二维码画到这个canvas上&#xff0c;mycanvas这个canvas生成一张图片&#xff0c;返回图片的临时路径最后保存图片到手机** 首先wxml,新版微信小程序…

【Javaee】网络原理—TCP协议的核心机制

前言 TCP/IP五层协议是互联网中的主流模型&#xff0c;为网络通信提供了一个稳固的框架。 主要包含了应用层&#xff0c;传输层&#xff0c;网络层&#xff0c;数据链路层&#xff0c;物理层。 本篇主要介绍传输层的TCP协议的核心机制 一. 确认应答&#xff08;ack&#xf…

JMeter压测时报错Address Already in use 或 java.net.SocketException: Socket closed

由于模拟并发请求会占用一个端口&#xff0c;和远程来建立连接&#xff0c;但是windows本身提供的端口访问机制受到限制&#xff0c;在Windows操作系统中&#xff0c;端口号的使用受到一定的管理和限制。端口号1024到5000&#xff08;或有时称为“动态端口”或“私有端口”范围…

使用 pydub 的 AudioSegment 获取音频时长 - python 实现

通过使用 pydub 的 AudioSegment 获取音频时长&#xff0c;音频常用格式如 m4a,wav等。 安装 python 库&#xff1a; pip install pydub 获取 m4a 格式的音频时长代码如下&#xff0c;代码如下&#xff1a; #-*-coding:utf-8-*- # date:2024-10 # Author: DataBall - XIAN #…

2024软考网络工程师笔记 - 第10章.组网技术

文章目录 交换机基础1️⃣交换机分类2️⃣其他分类方式3️⃣级联和堆叠4️⃣堆叠优劣势5️⃣交换机性能参数 &#x1f551;路由器基础1️⃣路由器接口2️⃣交换机路由器管理方式2️⃣交换机路由器管理方式 交换机基础 1️⃣交换机分类 1.根据交换方式分 存储转发式交换(Store…