Flutter桌面应用中如何缩小TextField的宽度？

• 方法一：用Container包裹TextField并指定固定宽度
  直接给目标TextField套一层Container，通过width属性精准控制输入框宽度，适合需要固定尺寸的场景：

  Padding(
    padding: const EdgeInsets.only(left: 20),
    child: Container(
      width: 200, // 自定义想要的宽度数值
      child: TextField(
        controller: _firstNumberController,
        keyboardType: TextInputType.number,
        decoration: const InputDecoration(labelText: 'First Number'),
      ),
    ),
  ),
  

• 方法二：通过Flex/Expanded的flex属性分配布局空间
  原布局中左侧使用Flexible、右侧使用Expanded，可以给两者设置flex值调整占比，间接缩小TextField所在区域的宽度：

  Flexible(
    flex: 1, // 左侧占比，数值越小宽度越窄
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        // 原有TextField代码
      ],
    ),
  ),
  Expanded(
    flex: 2, // 右侧占比，与左侧比例决定宽度分配
    child: Column(
      // 原有按钮和结果文本代码
    ),
  ),
  

• 方法三：用SizedBox限制TextField宽度
  和Container逻辑类似，使用SizedBox包裹TextField并设置宽度，写法更简洁：

  Padding(
    padding: const EdgeInsets.only(left: 20),
    child: SizedBox(
      width: 180,
      child: TextField(
        controller: _firstNumberController,
        keyboardType: TextInputType.number,
        decoration: const InputDecoration(labelText: 'First Number'),
      ),
    ),
  ),
  

• 方法四：利用TextField自身的constraints参数（Flutter 3.0+）
  直接通过TextField的constraints属性限制最大宽度，无需额外嵌套容器：

  TextField(
    controller: _firstNumberController,
    keyboardType: TextInputType.number,
    decoration: const InputDecoration(labelText: 'First Number'),
    constraints: const BoxConstraints(maxWidth: 220), // 限制输入框最大宽度
    maxWidthEnforced: true,
  ),
  

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