您当前的位置： 首页 > 慢生活 > 程序人生 网站首页程序人生

编写第一个flutter应用(table)组件化 - cospan - 输入数据收集及输入校验提示

发布时间：2026-07-06 15:24:15编辑：雪饮阅读（）

上篇中跨列table实现了，这次就是类似HTML中input的数据收集及输入校验提示。
关键点主要是
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _ageController = TextEditingController();
 
  @override
  void dispose() {
    _nameController.dispose();
    _ageController.dispose();
    super.dispose();
  }
以及
onPressed: () {
                          if (_nameController.text.isEmpty) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('请输入姓名')),
                            );
                            return;
                          }
                          final Map<String, String> userData = {
                            'name': _nameController.text,
                            'age': _ageController.text,
                            'gender': _selectedGender,
                          };
                          debugPrint('用户数据: $userData');
                        },
那么我们完整的col_span_table.dart：
import 'package:flutter/material.dart';
 
class ColSpanTable extends StatefulWidget {
  const ColSpanTable({super.key});
  @override
  State<ColSpanTable> createState() => _ColSpanTableState();
}
 
class _ColSpanTableState extends State<ColSpanTable> {
  String _selectedGender = '男';
  final TextEditingController _nameController = TextEditingController();
  final TextEditingController _ageController = TextEditingController();
 
  @override
  void dispose() {
    _nameController.dispose();
    _ageController.dispose();
    super.dispose();
  }
 
  Widget _buildHeaderCell(String text) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(text, style: const TextStyle(fontWeight: FontWeight.bold)),
    );
  }
 
  Widget _buildInputCell(String hint) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        controller: _nameController,
        decoration: InputDecoration(
          hintText: hint,
          border: const OutlineInputBorder(),
        ),
      ),
    );
  }
 
  Widget _buildNumberInputCell() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: TextField(
        controller: _ageController,
        keyboardType: TextInputType.number,
        decoration: const InputDecoration(
          hintText: '请输入年龄',
          border: OutlineInputBorder(),
        ),
      ),
    );
  }
 
  Widget _buildDropdownCell() {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: DropdownButton<String>(
        value: _selectedGender,
        onChanged: (String? newValue) {
          setState(() {
            _selectedGender = newValue!;
          });
        },
        items: <String>['男', '女'].map<DropdownMenuItem<String>>((String value) {
          return DropdownMenuItem<String>(value: value, child: Text(value));
        }).toList(),
      ),
    );
  }
 
  Widget _buildGridCell({
    required Widget child,
    bool rightBorder = false,
    bool bottomBorder = false,
  }) {
    return Container(
      decoration: BoxDecoration(
        border: Border(
          right: rightBorder ? const BorderSide() : BorderSide.none,
          bottom: bottomBorder ? const BorderSide() : BorderSide.none,
        ),
      ),
      child: child,
    );
  }
 
  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(border: Border.all()),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('姓名'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('年龄'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildHeaderCell('性别'),
                  bottomBorder: true,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                child: _buildGridCell(
                  child: _buildInputCell('请输入姓名'),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildNumberInputCell(),
                  rightBorder: true,
                  bottomBorder: true,
                ),
              ),
              Expanded(
                child: _buildGridCell(
                  child: _buildDropdownCell(),
                  bottomBorder: true,
                ),
              ),
            ],
          ),
          Row(
            children: [
              Expanded(
                flex: 3,
                child: _buildGridCell(
                  child: Center(
                    child: Padding(
                      padding: const EdgeInsets.symmetric(vertical: 10),
                      child: ElevatedButton(
                        style: ElevatedButton.styleFrom(
                          minimumSize: Size.zero,
                          padding: const EdgeInsets.symmetric(
                            horizontal: 16,
                            vertical: 16,
                          ),
                          tapTargetSize: MaterialTapTargetSize.shrinkWrap,
                        ),
                        onPressed: () {
                          if (_nameController.text.isEmpty) {
                            ScaffoldMessenger.of(context).showSnackBar(
                              const SnackBar(content: Text('请输入姓名')),
                            );
                            return;
                          }
                          final Map<String, String> userData = {
                            'name': _nameController.text,
                            'age': _ageController.text,
                            'gender': _selectedGender,
                          };
                          debugPrint('用户数据: $userData');
                        },
                        child: const Text('提交'),
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}