Flutter StatefulWidget多端适配：移动端返回Card、桌面端返回DataRow的实现方案咨询

嘿，我完全懂你的困扰——核心问题在于DataRow本身并不是一个独立的Widget，它只能作为DataTable的子组件使用，直接在build方法里返回它肯定会报错。不过别担心，我们完全可以在同一个StatefulWidget里实现多端适配，同时完美共享状态，下面给你具体的解决方案：

首先明确核心思路：桌面端的DataRow必须嵌套在DataTable（或包含DataTable的合法Widget容器）中才能正常渲染，而移动端的Card是独立Widget可以直接返回。我们在同一个State类里，根据平台/屏幕尺寸判断返回不同的Widget结构，所有状态变量（比如数据源、交互状态）都能在两种渲染方式下共享。

给你修改后的可运行代码示例，复用你已有的Card实现逻辑：

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

  @override
  State<MainView> createState() => _MainViewState();
}

class _MainViewState extends State<MainView> {
  // 这里存放你的共享状态，比如数据源、选中状态等
  final List<YourDataModel> _dataSource = [/* 初始化你的数据 */];
  bool _isItemSelected = false;

  // 自定义判断是否为移动端的逻辑（用屏幕宽度比直接判断平台更灵活）
  bool get isMobile {
    final screenWidth = MediaQuery.of(context).size.width;
    return screenWidth < 600; // 可根据需求调整断点宽度
  }

  // 复用你已有的Card组件实现
  Widget _buildMobileCard(YourDataModel data) {
    return Card(
      margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(data.title, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
            const SizedBox(height: 8),
            Text(data.description),
            const SizedBox(height: 12),
            Checkbox(
              value: _isItemSelected,
              onChanged: (value) {
                setState(() {
                  _isItemSelected = value ?? false;
                });
              },
            ),
            // 其他你已有的交互逻辑和UI元素
          ],
        ),
      ),
    );
  }

  // 封装桌面端的DataRow
  DataRow _buildDesktopDataRow(YourDataModel data) {
    return DataRow(
      cells: [
        DataCell(Text(data.title)),
        DataCell(Text(data.description)),
        DataCell(
          Checkbox(
            value: _isItemSelected,
            onChanged: (value) {
              setState(() {
                _isItemSelected = value ?? false;
              });
            },
          ),
        ),
      ],
    );
  }

  @override
  Widget build(BuildContext context) {
    if (isMobile) {
      // 移动端返回Card列表
      return ListView.builder(
        itemCount: _dataSource.length,
        itemBuilder: (context, index) => _buildMobileCard(_dataSource[index]),
      );
    } else {
      // 桌面端返回包含DataRow的DataTable（合法Widget）
      return SingleChildScrollView(
        padding: const EdgeInsets.all(16),
        child: DataTable(
          border: TableBorder.all(),
          columns: const [
            DataColumn(label: Text('标题', style: TextStyle(fontWeight: FontWeight.bold))),
            DataColumn(label: Text('描述', style: TextStyle(fontWeight: FontWeight.bold))),
            DataColumn(label: Text('选择', style: TextStyle(fontWeight: FontWeight.bold))),
          ],
          rows: _dataSource.map((data) => _buildDesktopDataRow(data)).toList(),
        ),
      );
    }
  }
}

// 替换成你实际的数据模型类
class YourDataModel {
  final String title;
  final String description;

  YourDataModel({required this.title, required this.description});
}

关键说明： #

1. 状态完全共享：所有状态变量（比如_dataSource、_isItemSelected）都在_MainViewState中，不管是Card还是DataRow都能访问并修改，保证多端状态一致。
2. 组件封装清晰：把移动端Card和桌面端DataRow分别封装成独立方法，既复用了你已有的Card逻辑，也让代码结构更整洁。
3. 合法Widget返回：桌面端的DataRow被包裹在DataTable中，而DataTable是标准Widget，完全符合build方法的返回要求，不会再报错。
4. 灵活适配判断：用屏幕宽度判断适配场景，比直接判断平台更适配平板等中间尺寸设备，你可以根据产品需求调整断点数值。

如果你的场景是单条数据而非列表，只需要把移动端的ListView换成单个Card，桌面端的DataTable只包含一行DataRow即可，逻辑完全一致。

备注：内容来源于stack exchange，提问作者David Escariz