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