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

编写第一个flutter应用(table)

发布时间：2026-07-04 18:43:30编辑：雪饮阅读（）

基于上篇中参考
Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            )
所在的children数组，我们新增一个table，类似实现如：
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
    </tr>
    <tr>
        <td><input type="text" placeholder="请输入姓名"></td>
        <td><input type="number" placeholder="请输入年龄" min="19" value="19" max="30"></td>
        <td>
            <select>
                <option value="1">男</option>
                <option value="2">女</option>
            </select>
        </td>
    </tr>
</table>
这样的效果
那么flutter中我们是要在lib/main.dart中实现：
那接下来的children就变成这样：
children: [
            const Text('You have pushed the button this many times:'),
            Table(
              border: TableBorder.all(),
              columnWidths: const {
                0: FlexColumnWidth(1),
                1: FlexColumnWidth(1),
                2: FlexColumnWidth(1),
              },
              children: [
                TableRow(
                  children: [
                    _buildHeaderCell('姓名'),
                    _buildHeaderCell('年龄'),
                    _buildHeaderCell('性别'),
                  ],
                ),
                TableRow(
                  children: [
                    _buildInputCell('请输入姓名'),
                    _buildNumberInputCell(),
                    _buildDropdownCell(),
                  ],
                ),
              ],
            ),
            Text(
              '$_counter',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
用到的几个单独定义的widget
 Widget _buildHeaderCell(String text) {
    return TableCell(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Text(text, style: const TextStyle(fontWeight: FontWeight.bold)),
      ),
    );
  }
 
  Widget _buildInputCell(String hint) {
    return TableCell(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          decoration: InputDecoration(
            hintText: hint,
            border: const OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
 
  Widget _buildNumberInputCell() {
    return TableCell(
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: TextField(
          keyboardType: TextInputType.number,
          decoration: const InputDecoration(
            hintText: '请输入年龄',
            border: OutlineInputBorder(),
          ),
        ),
      ),
    );
  }
 
  Widget _buildDropdownCell() {
    return TableCell(
      child: 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(),
        ),
      ),
    );
  }
虽然Table更贴近html中table的实现，我是指从语法上，但html中的table是支持跨列的，那么flutter中跨列的表格的实现就不是很好。