Flutter中Map排序及在Card组件中展示的实现方案咨询

要完成这个需求，核心是先分类键的类型，再分别按规则排序，最后渲染到Card组件。以下是具体的实现思路和代码示例（以React为例，适配常见的Card组件场景）：

步骤拆解 #

• 分类键类型：把字典的键分成「数字型字符串键」和「非数字型键」两类
• 针对性排序：
  • 数字型键：转成数值后按升序排列（避免字符串排序的坑，比如'9'和'21'字符串排序会错误地把'21'放在前面）
  • 非数字型键：直接用原生字符串排序，默认就是按ASCII码升序排列
• 合并与渲染：将排序后的两类键合并，遍历生成「键:值」格式的内容，渲染到Card组件中

代码实现 #

核心排序逻辑 #

const originalDict = {'34': 'thirty-four', '90': 'ninety', '91': 'ninety-one', '21': 'twenty-one', '61': 'sixty-one', '9': 'nine', '2': 'two', '6': 'six', '3': 'three', '8': 'eight', '80': 'eighty', '81': 'eighty-one', 'Ninety-Nine': '99', 'nine-hundred': '900'};

// 一次遍历完成键的分类
const [numericKeys, nonNumericKeys] = Object.keys(originalDict).reduce((acc, key) => {
  // 判断是否为数字型字符串键
  if (!isNaN(Number(key))) {
    acc[0].push(key);
  } else {
    acc[1].push(key);
  }
  return acc;
}, [[], []]);

// 数字键按数值升序排序
numericKeys.sort((a, b) => Number(a) - Number(b));

// 非数字键按ASCII码升序排序（默认sort()行为）
nonNumericKeys.sort();

// 合并排序后的键列表（可调整顺序，比如把非数字键放前面）
const sortedKeys = [...numericKeys, ...nonNumericKeys];

集成到Card组件（React示例） #

假设使用Material-UI的Card组件，你可以这样封装：

import React from 'react';
import Card from '@mui/material/Card';
import CardContent from '@mui/material/CardContent';
import Typography from '@mui/material/Typography';

const SortedDictCard = () => {
  const originalDict = {'34': 'thirty-four', '90': 'ninety', '91': 'ninety-one', '21': 'twenty-one', '61': 'sixty-one', '9': 'nine', '2': 'two', '6': 'six', '3': 'three', '8': 'eight', '80': 'eighty', '81': 'eighty-one', 'Ninety-Nine': '99', 'nine-hundred': '900'};

  // 复用上面的分类排序逻辑
  const [numericKeys, nonNumericKeys] = Object.keys(originalDict).reduce((acc, key) => {
    if (!isNaN(Number(key))) {
      acc[0].push(key);
    } else {
      acc[1].push(key);
    }
    return acc;
  }, [[], []]);

  numericKeys.sort((a, b) => Number(a) - Number(b));
  nonNumericKeys.sort();
  const sortedKeys = [...numericKeys, ...nonNumericKeys];

  return (
    <Card sx={{ maxWidth: 345, margin: '20px auto' }}>
      <CardContent>
        <Typography variant="h6" component="div" gutterBottom>
          排序后的字典内容
        </Typography>
        {sortedKeys.map((key, index) => (
          <Typography key={index} variant="body1" color="text.secondary">
            {`${key}: ${originalDict[key]}`}
          </Typography>
        ))}
      </CardContent>
    </Card>
  );
};

export default SortedDictCard;

方案优势 #

• 高效简洁：仅需一次遍历分类，排序逻辑清晰，时间复杂度为O(n log n)（主要来自排序步骤，是最优的排序复杂度）
• 准确性高：数字键按数值排序，避免了字符串排序的错误；非数字键直接利用原生排序实现ASCII升序，完全符合需求
• 灵活可调：如果需要调整数字键和非数字键的展示顺序，只需修改sortedKeys的合并顺序即可
• 组件化友好：逻辑与渲染分离，适配React等现代前端框架的组件化开发模式

内容的提问来源于stack exchange，提问作者Sheldon Osotsi