当前位置: 首页 > news >正文

Flutter基础(前端教程⑥-按钮切换)

1. 假设你已有的两个表单组件(示例)

// 手机号注册表单(示例)
class PhoneRegisterForm extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: [TextField(decoration: InputDecoration(labelText: '手机号')),TextField(decoration: InputDecoration(labelText: '验证码')),// 其他手机号注册相关组件...],);}
}// 邮箱注册表单(示例)
class EmailRegisterForm extends StatelessWidget {@overrideWidget build(BuildContext context) {return Column(children: [TextField(decoration: InputDecoration(labelText: '邮箱地址')),TextField(decoration: InputDecoration(labelText: '密码')),// 其他邮箱注册相关组件...],);}
}

2. 实现切换逻辑的主页面

import 'package:flutter/material.dart';class RegisterPage extends StatefulWidget {@override_RegisterPageState createState() => _RegisterPageState();
}class _RegisterPageState extends State<RegisterPage> {// 状态变量:标记当前是否选中“手机号注册”bool _isPhoneSelected = true;@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: const Text('注册')),body: Column(children: [// 1. 标签栏(手机号/邮箱注册切换按钮)Row(children: [// 手机号注册标签_buildTab(title: '手机号注册',isSelected: _isPhoneSelected,onTap: () {setState(() => _isPhoneSelected = true); // 切换到手机号表单},),// 邮箱注册标签_buildTab(title: '邮箱注册',isSelected: !_isPhoneSelected,onTap: () {setState(() => _isPhoneSelected = false); // 切换到邮箱表单},),],),// 2. 底部分割线Container(height: 1,color: const Color(0xFFEEEEEE),),// 3. 表单内容(根据选中状态切换显示)Expanded(child: Padding(padding: const EdgeInsets.all(16),child: _isPhoneSelected? PhoneRegisterForm() // 显示手机号表单: EmailRegisterForm(), // 显示邮箱表单),),],),);}// 封装标签按钮(复用逻辑+点击交互)Widget _buildTab({required String title,required bool isSelected,required VoidCallback onTap,}) {return Expanded(child: GestureDetector(onTap: onTap, // 点击切换状态child: Container(height: 48,alignment: Alignment.center,child: Stack(children: [// 标签文字Text(title,style: TextStyle(color: isSelected ? const Color(0xFF092A39) : const Color(0xFF849199),fontSize: 14,fontWeight: FontWeight.w500,letterSpacing: 0.10,),),// 选中状态下的底部指示器if (isSelected)Positioned(bottom: 0,left: 0,right: 0,child: Container(height: 3,width: 67, // 与你原设计的指示器宽度一致margin: const EdgeInsets.symmetric(horizontal: 2),decoration: BoxDecoration(color: const Color(0xFF092A39),borderRadius: BorderRadius.circular(100),),),),],),),),);}
}

123

http://www.dtcms.com/a/270564.html

相关文章:

  • 《重构项目》基于Apollo架构设计的项目重构方案(多种地图、多阶段、多任务、状态机管理)
  • 【教程】在ubuntu安装Edge浏览器
  • 工业通讯网关在电子制造中的核心作用——从DeviceNet到Modbus TCP的智能转换
  • 家庭网络中的服务器怎么对外提供服务?
  • 跨平台ROS2视觉数据流:服务器运行IsaacSim+Foxglove本地可视化全攻略
  • 【网络】Linux 内核优化实战 - net.ipv4.tcp_dsack
  • NHibernate案例
  • scp:上传大型数据集到实验室服务器
  • 2025年人工智能、虚拟现实与交互设计国际学术会议
  • 蛋白质序列-kappa参数计算算法解读
  • Linux——I/O复用
  • django 一个表中包括id和parentid,如何通过parentid找到全部父爷id
  • 微信小程序91~100
  • 什么是高防 IP?从技术原理到实战部署的深度解析
  • 制作MikTex本地包可用于离线安装包
  • springBoot使用XWPFDocument 和 LoopRowTableRenderPolicy 两种方式填充数据到word模版中
  • ARM单片机滴答定时器理解与应用(一)(详细解析)
  • Node.js 是什么?npm 是什么? Vue 为什么需要他们?
  • CVE-2025-32463复现
  • ✍️ Python 批量设置 Word 文档多级字体样式(标题/正文/名称/小节)
  • PHP 基于模板动态生成 Word 文档:图片 + 表格数据填充全方案(PHPOffice 实战)
  • 使用python 将多个docx文件合并为一个word
  • 【Unity】MiniGame编辑器小游戏(十)连连看【Link】
  • 实时地震分析:AI+Python如何帮我们提前感知大地的怒吼?
  • 使用 Docker 搭建 Go Web 应用开发环境——AI教你学Docker
  • NO.1数据结构绪论|数据结构|逻辑结构|物理结构|算法|算法的度量
  • 从救火到赋能:运维的职责演进与云原生时代的未来图景
  • 聚铭安全管家平台2.0实战解码 | 安服篇(二):无人值守自动化封禁
  • 【Unity】MiniGame编辑器小游戏(十一)消消乐【Crush】
  • 本地Qwen中医问诊小程序系统开发