Dart中根据下拉框值动态显示对应勾选标记的实现求助

核心思路 #

通过维护选中状态变量，将下拉框选择与OrderStatusBar的激活状态（显示勾选）关联：

• 定义状态递进顺序列表，确保状态逻辑符合Pending → Confirmed → Dispatched → Recieved的递进关系
• 根据选中状态，自动激活该状态及之前的所有状态的勾选标记
• 利用setState更新选中状态，触发UI实时渲染

修改后的完整代码 #

class OrderListScreen extends StatefulWidget {
  const OrderListScreen({Key? key}) : super(key: key);

  @override
  State<OrderListScreen> createState() => _OrderListScreenState();
}

class _OrderListScreenState extends State<OrderListScreen> {
  // 存储当前选中的订单状态，初始值设为第一个选项
  String? _selectedStatus = 'Pending';
  // 定义状态递进顺序，用于判断哪些状态需要激活勾选
  final List<String> _statusOrder = [
    'Pending',
    'Confirmed',
    'Dispatched',
    'Recieved'
  ];

  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        padding: const EdgeInsets.all(16),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Text(
              "请从下方下拉框选择订单状态:",
              style: TextStyle(backgroundColor: Colors.orange),
            ),
            const SizedBox(height: 16),
            DropdownButton<String>(
              // 绑定当前选中值
              value: _selectedStatus,
              items: _statusOrder.map((String value) {
                return DropdownMenuItem<String>(
                  value: value,
                  child: Text(value),
                );
              }).toList(),
              // 选中时更新状态
              onChanged: (newValue) {
                setState(() {
                  _selectedStatus = newValue;
                });
              },
            ),
            const SizedBox(height: 32),
            // 根据选中状态动态生成OrderStatusBar列表
            Column(
              children: _statusOrder.map((status) {
                // 判断当前状态是否激活：选中状态及之前的所有状态都显示勾选
                final isActive = _statusOrder.indexOf(status) <= _statusOrder.indexOf(_selectedStatus!);
                return Column(
                  children: [
                    OrderStatusBar(title: status, status: isActive),
                    // 最后一个状态不显示分隔虚线
                    if (status != _statusOrder.last) dottedLine(),
                  ],
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

// 以下为原OrderStatusBar及相关组件代码，无需修改
class OrderStatusBar extends StatefulWidget {
  const OrderStatusBar({Key? key, required this.title, required this.status})
      : super(key: key);
  final String title;
  final bool status;
  @override
  State<OrderStatusBar> createState() => _OrderStatusBarState();
}

class _OrderStatusBarState extends State<OrderStatusBar> {
  @override
  Widget build(BuildContext context) {
    return Directionality(
      textDirection: TextDirection.rtl,
      child: Row(
        children: [
          widget.status ? dottedCircleWithCheckMark() : dottedCircle(),
          const SizedBox(width: 30),
          Text(
            widget.title, // 若需国际化可保留原代码的`.tr`，否则直接使用widget.title
            style: TextStyle(
              fontSize: 20,
              fontWeight: widget.status ? FontWeight.bold : null,
            ),
          ),
        ],
      ),
    );
  }
}

const size = 25.0;
const strokeWidth = 1.0;
const checkedColor = Color.fromRGBO(232, 113, 65, 1);

Widget dottedLine() {
  return Directionality(
    textDirection: TextDirection.rtl,
    child: Align(
      alignment: Alignment.topRight,
      child: Container(
        margin: const EdgeInsets.fromLTRB(0, 0, size / 2, 0),
        child: const Padding(
          padding: EdgeInsets.only(left: 27 / 2),
          child: SizedBox(
            height: size,
            child: DottedLine(
              dashColor: Colors.black,
              direction: Axis.vertical,
              lineLength: size,
              lineThickness: strokeWidth,
              dashLength: 5,
              dashGapLength: 5,
            ),
          ),
        ),
      ),
    ),
  );
}

Widget dottedCircle() {
  return DottedBorder(
      borderType: BorderType.Circle,
      dashPattern: const [5, 5],
      child: Container(
        height: size,
        width: size,
        decoration: const BoxDecoration(shape: BoxShape.circle),
      ));
}

Widget dottedCircleWithCheckMark() {
  return Container(
    height: size + strokeWidth * 2,
    width: size + strokeWidth * 2,
    decoration: const BoxDecoration(
      shape: BoxShape.circle,
      color: checkedColor,
    ),
    child: const Icon(
      Icons.check,
      color: Colors.white,
      size: size / 4 * 3,
    ),
  );
}

关键修改说明 #

1. 状态变量维护：新增_selectedStatus存储选中状态，_statusOrder定义状态递进顺序，确保判断逻辑的准确性。
2. 下拉框逻辑完善：给DropdownButton绑定选中值，通过onChanged回调更新状态并触发UI刷新。
3. 动态生成组件：遍历状态列表，通过索引判断当前状态是否需要激活勾选，实现选中状态对应数量的勾选显示。
4. UI连贯性优化：在状态之间添加分隔虚线，最后一个状态不显示，保持界面整洁。

内容的提问来源于stack exchange，提问作者Passionate Programmer