Flutter新手：用Column/Row实现交替色表格及代码优化咨询

作为Flutter新手，我需要仅通过Column和Row组件实现棋盘格样式的表格——单元格背景色两种颜色交替，且每行起始颜色与上一行相反。目前已经写出了可实现效果的代码，想请教下优化方向。

原代码 #

import 'package:flutter/material.dart';
Color getMyColor(int c, int r) {
  if (c % 2 == r % 2) {
    return Colors.yellow;
  }
  return Colors.black;
}

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Center(child: const Text('CheckerBoard')),
      ),
      body: Container(
        child: Column(
          children: <Widget>[
            for (var x = 1; x <= 7; x++)
              Expanded(
                child: Row(
                  children: <Widget>[
                    for (var y = 1; y <= 5; y++)
                      Expanded(
                        child: Container(
                          color: getMyColor(x, y),
                        ),
                      ),
                  ],
                ),
              ),
          ],
        ),
      ),
    );
  }
}

优化方案 #

1. 提取常量，降低维护成本

把硬编码的行数、列数、棋盘颜色定义为常量，后续修改参数时无需逐个查找替换：

const int _rowCount = 7;
const int _columnCount = 5;
const Color _lightColor = Colors.yellow;
const Color _darkColor = Colors.black;

2. 简化颜色判断逻辑

原getMyColor方法可以简化为一行表达式，逻辑更直观：

Color _getCellColor(int row, int col) => (row + col) % 2 == 0 ? _lightColor : _darkColor;

3. 移除多余Widget层级

原代码中body嵌套的Container没有实际作用，直接返回Column即可，减少Widget树的层级：

body: Column(
  children: [
    // ... 循环代码
  ],
),

4. 封装独立棋盘组件

将棋盘的生成逻辑抽成独立的Checkerboard组件，让代码结构更清晰，也方便后续复用：

class Checkerboard extends StatelessWidget {
  const Checkerboard({super.key});

  static const int _rowCount = 7;
  static const int _columnCount = 5;
  static const Color _lightColor = Colors.yellow;
  static const Color _darkColor = Colors.black;

  Color _getCellColor(int row, int col) => (row + col) % 2 == 0 ? _lightColor : _darkColor;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (int row = 1; row <= _rowCount; row++)
          Expanded(
            child: Row(
              children: [
                for (int col = 1; col <= _columnCount; col++)
                  Expanded(child: Container(color: _getCellColor(row, col))),
              ],
            ),
          ),
      ],
    );
  }
}

之后在MyStatelessWidget中直接使用const Checkerboard()即可。

5. 明确类型注解

给循环变量添加int类型注解，提升代码可读性和类型安全性：

for (int row = 1; row <= _rowCount; row++)
// ...
for (int col = 1; col <= _columnCount; col++)

优化后的完整代码 #

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: _title,
      home: MyStatelessWidget(),
    );
  }
}

class MyStatelessWidget extends StatelessWidget {
  const MyStatelessWidget({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Center(child: Text('CheckerBoard')),
      ),
      body: const Checkerboard(),
    );
  }
}

class Checkerboard extends StatelessWidget {
  const Checkerboard({super.key});

  static const int _rowCount = 7;
  static const int _columnCount = 5;
  static const Color _lightColor = Colors.yellow;
  static const Color _darkColor = Colors.black;

  Color _getCellColor(int row, int col) => (row + col) % 2 == 0 ? _lightColor : _darkColor;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        for (int row = 1; row <= _rowCount; row++)
          Expanded(
            child: Row(
              children: [
                for (int col = 1; col <= _columnCount; col++)
                  Expanded(child: Container(color: _getCellColor(row, col))),
              ],
            ),
          ),
      ],
    );
  }
}

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