Flutter测验应用点击选项切换Container边框颜色实现方法咨询

首先将当前页面改为StatefulWidget，通过状态变量控制UI动态更新，具体实现如下：

核心状态变量定义 #

在State类中定义三个变量控制边框逻辑：

• 正确答案的索引（4个选项对应索引0~3，提前预设正确值）
• 用户选中的选项索引
• 用户是否已答题的标记位

边框颜色判断规则 #

Color getOptionBorderColor(int currentOptionIndex) {
  // 未答题时所有选项边框为灰色
  if (!isAnswered) return Colors.grey;
  // 正确选项始终显示绿色边框
  if (currentOptionIndex == correctAnswerIndex) return Colors.green;
  // 用户选中的错误选项显示红色边框
  if (currentOptionIndex == selectedIndex) return Colors.red;
  // 其余未选中的错误选项保持灰色
  return Colors.grey;
}

完整实现代码 #

import 'package:flutter/material.dart';

class QuizPage extends StatefulWidget {
  const QuizPage({super.key});

  @override
  State<QuizPage> createState() => _QuizPageState();
}

class _QuizPageState extends State<QuizPage> {
  // 预设选项列表
  final List<String> options = ['Answer 1', 'Answer 2', 'Answer 3', 'Answer 4'];
  // 预设正确答案的索引，示例为第二个选项是正确答案
  final int correctAnswerIndex = 1;
  // 用户选中的选项索引
  int? selectedIndex;
  // 是否已答题标记
  bool isAnswered = false;

  // 获取选项边框颜色
  Color getOptionBorderColor(int currentOptionIndex) {
    if (!isAnswered) return Colors.grey;
    if (currentOptionIndex == correctAnswerIndex) return Colors.green;
    if (currentOptionIndex == selectedIndex) return Colors.red;
    return Colors.grey;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey.shade100,
      body: Column(
        children: [
          const SizedBox(height: 20),
          Expanded(
            child: Container(
              margin: const EdgeInsets.only(bottom: 10),
              padding: const EdgeInsets.all(8.0),
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(25.0),
              ),
              child: Column(
                children: [
                  const SizedBox(height: 10),
                  // 循环生成4个选项
                  ...List.generate(options.length, (index) {
                    final borderColor = getOptionBorderColor(index);
                    return InkWell(
                      onTap: () {
                        // 已答题后不再响应点击
                        if (isAnswered) return;
                        setState(() {
                          isAnswered = true;
                          selectedIndex = index;
                        });
                      },
                      child: Container(
                        margin: const EdgeInsets.only(top: 10),
                        padding: const EdgeInsets.all(8.0),
                        decoration: BoxDecoration(
                          border: Border.all(color: borderColor),
                          borderRadius: BorderRadius.circular(15),
                        ),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: [
                            Text(
                              options[index],
                              style: TextStyle(color: borderColor, fontSize: 16),
                            ),
                            Container(
                              height: 26,
                              width: 26,
                              decoration: BoxDecoration(
                                borderRadius: BorderRadius.circular(50.0),
                                border: Border.all(color: borderColor),
                              ),
                              // 可选扩展：选中后显示对勾/叉号标识
                              child: isAnswered
                                  ? (index == correctAnswerIndex
                                      ? const Icon(Icons.check, color: Colors.green, size: 18)
                                      : (index == selectedIndex
                                          ? const Icon(Icons.close, color: Colors.red, size: 18)
                                          : const SizedBox()))
                                  : const SizedBox(),
                            ),
                          ],
                        ),
                      ),
                    );
                  }),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

逻辑说明 #

• 用户未点击选项时，所有选项边框为默认灰色
• 用户选中正确选项：仅正确选项边框变为绿色
• 用户选中错误选项：选中的错误选项边框变为红色，同时正确选项边框变为绿色
• 答题完成后不再响应选项点击，避免重复提交

内容的提问来源于stack exchange，提问作者puthumai nathan