Flutter基础（前端教程⑥-按钮切换）

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

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

// 邮箱注册表单（示例）
class EmailRegisterForm extends StatelessWidget {
  @override
  Widget 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;

  @override
  Widget 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