Flutter如何实现Cupertino Textfield风格灰色背景输入框

你截图里灰色背景区域的两个文本输入框，就是基于CupertinoTextField实现的，属于iOS系统原生常见的分组列表输入样式，不是Material风格的TextField。

效果参考 #

iOS风格分组输入框截图

实现要点 #

• 外层容器：使用Container包裹整个输入组，设置10左右的圆角、浅灰色填充（推荐用CupertinoColors.systemGrey6适配深浅色模式），容器内部放置Column组件垂直排布内容。
• 输入框配置：两个输入项均使用CupertinoTextField，关闭组件自带的默认边框和背景：
  • 将decoration属性设为null清除默认样式
  • 配置padding为EdgeInsets.symmetric(horizontal: 16, vertical: 14)匹配原生边距
  • 通过placeholder设置占位提示文字，prefix参数可放置前置图标/说明文字
  • 按需配置obscureText实现密码框密文显示效果
• 分割线处理：在两个输入框之间添加高度1px的分割线，左右保留16px边距，颜色使用CupertinoColors.separator，不要顶满容器宽度，和截图效果对齐。

示例代码 #

Container(
  margin: const EdgeInsets.symmetric(horizontal: 16),
  decoration: BoxDecoration(
    color: CupertinoColors.systemGrey6.resolveFrom(context),
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    mainAxisSize: MainAxisSize.min,
    children: [
      // 第一个输入框：账号
      const CupertinoTextField(
        decoration: null,
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        placeholder: "请输入账号",
        prefix: Padding(
          padding: EdgeInsets.only(left: 16),
          child: Icon(CupertinoIcons.person, size: 20),
        ),
      ),
      // 分割线
      Divider(
        height: 1,
        indent: 16,
        endIndent: 0,
        color: CupertinoColors.separator.resolveFrom(context),
      ),
      // 第二个输入框：密码
      const CupertinoTextField(
        decoration: null,
        padding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        placeholder: "请输入密码",
        obscureText: true,
        prefix: Padding(
          padding: EdgeInsets.only(left: 16),
          child: Icon(CupertinoIcons.lock, size: 20),
        ),
      ),
    ],
  ),
)

注意：如果要做全平台适配，也可以用Material的TextField修改主题模拟这个效果，但在iOS设备上优先用Cupertino组件，交互手感和系统原生完全一致。

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