如何在Flutter中实现此类UI？附现有代码与问题截图

原始代码 #

Container( child: Column(children: [
                TextFormField(
                  style: TextStyle(color: Colors.white.withOpacity(0.5)),
                  decoration: InputDecoration(
                    hintText: "Company",
                    hintStyle: TextStyle(color: Color(0xff676767)),
                    filled: true,
                    fillColor: Color(0xff1e1e1e),
                    border: OutlineInputBorder(
                        // borderRadius: BorderRadius.circular(18),
                        ),
                  ),
                ),
                TextFormField(
                  style: TextStyle(color: Colors.white.withOpacity(0.5)),
                  decoration: InputDecoration(
                    hintText: "Title",
                    hintStyle: TextStyle(color: Color(0xff676767)),
                    filled: true,
                    fillColor: Color(0xff1e1e1e),
                    border: OutlineInputBorder(
                        // borderRadius: BorderRadius.circular(18),
                        ),
                  ),
                ),
              ]),
            ),

修改方案（贴合目标UI） #

以下两种方案均可实现截图中的组合输入框效果：

方案1：独立输入框+分向圆角

通过分别设置两个输入框的圆角，隐藏中间重复边框，实现组合效果：

Container(
  child: Column(
    children: [
      TextFormField(
        style: TextStyle(color: Colors.white.withOpacity(0.5)),
        decoration: InputDecoration(
          hintText: "Company",
          hintStyle: TextStyle(color: Color(0xff676767)),
          filled: true,
          fillColor: Color(0xff1e1e1e),
          isDense: true,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          // 仅保留顶部圆角
          border: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(18)),
            borderSide: BorderSide(color: Color(0xff676767)),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(18)),
            borderSide: BorderSide(color: Color(0xff676767), bottom: BorderSide.none),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(top: Radius.circular(18)),
            borderSide: BorderSide(color: Colors.white.withOpacity(0.7), bottom: BorderSide.none),
          ),
        ),
      ),
      TextFormField(
        style: TextStyle(color: Colors.white.withOpacity(0.5)),
        decoration: InputDecoration(
          hintText: "Title",
          hintStyle: TextStyle(color: Color(0xff676767)),
          filled: true,
          fillColor: Color(0xff1e1e1e),
          isDense: true,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
          // 仅保留底部圆角
          border: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(18)),
            borderSide: BorderSide(color: Color(0xff676767)),
          ),
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(18)),
            borderSide: BorderSide(color: Color(0xff676767)),
          ),
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.vertical(bottom: Radius.circular(18)),
            borderSide: BorderSide(color: Colors.white.withOpacity(0.7)),
          ),
        ),
      ),
    ],
  ),
)

方案2：容器包裹+内部分割线

用带圆角的容器统一包裹两个输入框，内部用分割线区分，样式更简洁统一：

Container(
  decoration: BoxDecoration(
    color: Color(0xff1e1e1e),
    borderRadius: BorderRadius.circular(18),
    border: Border.all(color: Color(0xff676767)),
  ),
  child: Column(
    children: [
      TextFormField(
        style: TextStyle(color: Colors.white.withOpacity(0.5)),
        decoration: InputDecoration(
          hintText: "Company",
          hintStyle: TextStyle(color: Color(0xff676767)),
          border: InputBorder.none,
          isDense: true,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
      ),
      // 输入框间的分割线，可调整缩进适配设计
      Divider(
        color: Color(0xff676767),
        height: 1,
        thickness: 1,
        indent: 16,
        endIndent: 16,
      ),
      TextFormField(
        style: TextStyle(color: Colors.white.withOpacity(0.5)),
        decoration: InputDecoration(
          hintText: "Title",
          hintStyle: TextStyle(color: Color(0xff676767)),
          border: InputBorder.none,
          isDense: true,
          contentPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 14),
        ),
      ),
    ],
  ),
)

关键说明 #

• isDense: true 和 contentPadding 用于调整输入框内边距，避免默认的过大间距
• 方案1通过borderSide: BorderSide.none隐藏第一个输入框的底部边框，消除中间重复线条
• 方案2用容器统一设置圆角和边框，输入框去掉自身边框，内部分割线更贴合设计风格

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