Flutter中使用OutlineInputBorder如何隐藏输入框单侧边框

实现方案 #

Flutter默认的OutlineInputBorder不支持单独控制某一侧边框的显示，以下两种方案均可实现需求： #

方案1：自定义边框类（推荐，适配所有输入框状态）

直接继承OutlineInputBorder重写绘制逻辑，单独屏蔽右侧/左侧边框：

// 自定义隐藏右边框的输入框边框，用于区号选择框
class NoRightBorderOutlineInputBorder extends OutlineInputBorder {
  const NoRightBorderOutlineInputBorder({
    super.borderSide = const BorderSide(width: 1, color: Color(0xFFF2F2F7)),
    super.borderRadius = BorderRadius.zero,
    super.gapPadding = 4.0,
  });

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    final Paint paint = borderSide.toPaint();
    final RRect outer = borderRadius.resolve(textDirection).toRRect(rect);
    final RRect center = outer.deflate(borderSide.width / 2.0);
    // 仅绘制上、左、下三边，跳过右边框
    canvas.drawLine(center.topLeft, center.topRight, paint);
    canvas.drawLine(center.topLeft, center.bottomLeft, paint);
    canvas.drawLine(center.bottomLeft, center.bottomRight, paint);
  }
}

// 自定义隐藏左边框的输入框边框，用于号码输入框
class NoLeftBorderOutlineInputBorder extends OutlineInputBorder {
  const NoLeftBorderOutlineInputBorder({
    super.borderSide = const BorderSide(width: 1, color: Color(0xFFF2F2F7)),
    super.borderRadius = BorderRadius.zero,
    super.gapPadding = 4.0,
  });

  @override
  void paint(
    Canvas canvas,
    Rect rect, {
    double? gapStart,
    double gapExtent = 0.0,
    double gapPercentage = 0.0,
    TextDirection? textDirection,
  }) {
    final Paint paint = borderSide.toPaint();
    final RRect outer = borderRadius.resolve(textDirection).toRRect(rect);
    final RRect center = outer.deflate(borderSide.width / 2.0);
    // 仅绘制上、右、下三边，跳过左边框
    canvas.drawLine(center.topLeft, center.topRight, paint);
    canvas.drawLine(center.topRight, center.bottomRight, paint);
    canvas.drawLine(center.bottomLeft, center.bottomRight, paint);
  }
}

完成自定义后直接替换原有边框配置即可，同时要同步配置所有状态下的边框保证显示一致：

• 区号选择框配置：

border: const NoRightBorderOutlineInputBorder(),
// 聚焦状态边框示例，可按需修改颜色
focusedBorder: const NoRightBorderOutlineInputBorder(
  borderSide: BorderSide(width: 1, color: Colors.blue),
),
enabledBorder: const NoRightBorderOutlineInputBorder(),

• 号码输入框配置：

border: const NoLeftBorderOutlineInputBorder(),
// 聚焦状态边框示例，可按需修改颜色
focusedBorder: const NoLeftBorderOutlineInputBorder(
  borderSide: BorderSide(width: 1, color: Colors.blue),
),
enabledBorder: const NoLeftBorderOutlineInputBorder(),

方案2：外层统一加边框（实现简单，适合快速开发）

无需自定义类，给两个输入框的外层Row加统一边框，输入框本身取消自带边框即可：

Row(
  children: [
    // 区号选择框
    Expanded(
      flex: 1,
      child: TextField(
        decoration: const InputDecoration(
          border: InputBorder.none,
          hintText: "+86",
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 16),
        ),
      ),
    ),
    // 中间分割线
    Container(width: 1, height: 24, color: const Color(0xFFF2F2F7)),
    // 号码输入框
    Expanded(
      flex: 3,
      child: TextField(
        decoration: const InputDecoration(
          border: InputBorder.none,
          hintText: "请输入手机号",
          contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 16),
        ),
      ),
    ),
  ],
  // 外层统一设置边框
  decoration: BoxDecoration(
    border: Border.all(width: 1, color: const Color(0xFFF2F2F7)),
    borderRadius: BorderRadius.circular(8),
  ),
)

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