Flutter给输入框添加单侧边框

输入框的单侧边框

Flutter TextField属性

const TextField({
    Key key,
    this.controller,                    // 控制正在编辑文本
    this.focusNode,                     // 获取键盘焦点
    this.decoration = const InputDecoration(),              //装饰 包含hintText
    TextInputType keyboardType,         // 键盘类型
    this.textInputAction,               // 键盘的操作按钮类型
    this.textCapitalization = TextCapitalization.none,      // 配置大小写键盘
    this.style,                         // 输入文本样式
    this.textAlign = TextAlign.start,   // 对齐方式
    this.textDirection,                 // 文本方向
    this.autofocus = false,             // 是否自动对焦
    this.obscureText = false,           // 是否隐藏内容，例如密码格式
    this.autocorrect = true,            // 是否自动校正
    this.maxLines = 1,                  // 最大行数
    this.maxLength,                     // 允许输入的最大长度
    this.maxLengthEnforced = true,      // 是否允许超过输入最大长度
    this.onChanged,                     // 文本内容变更时回调
    this.onEditingComplete,             // 提交内容时回调
    this.onSubmitted,                   // 用户提示完成时回调
    this.inputFormatters,               // 验证及格式
    this.enabled,                       // 是否不可点击
    this.cursorWidth = 2.0,             // 光标宽度
    this.cursorRadius,                  // 光标圆角弧度
    this.cursorColor,                   // 光标颜色
    this.keyboardAppearance,            // 键盘亮度
    this.scrollPadding = const EdgeInsets.all(20.0),        // 滚动到视图中时，填充边距
    this.enableInteractiveSelection,    // 长按是否展示【剪切/复制/粘贴菜单LengthLimitingTextInputFormatter】
    this.onTap,                         // 点击时回调
})

其中decoration是用来描述输入框的

  const InputDecoration({
    this.icon, //输入框种的icon提示
    this.labelText,//和Icon类
    this.labelStyle,
    this.helperText,//提示文本
    this.helperStyle,
    this.helperMaxLines,
    this.hintText,//暗示文本
    this.hintStyle,
    this.hintMaxLines,
    this.errorText,//错误提示
    this.errorStyle,
    this.errorMaxLines
//还要很多属性看几个重点的
...
    this.focusedBorder,//获取到焦点时候的边框。比如：正在输入的时候的边框
    this.focusedErrorBorder,//焦点失败的时候边框
    this.disabledBorder,//禁用时候的边框
    this.enabledBorder,//可用的时候边框
    this.border,//可用的时候边框
}

如果你添加了controller，注意border只有在enableBorder 以及其他几个没有赋值的时候才有用，并且修改颜色和宽度都不会生效。
在decoration修饰单侧边框无法做到。
我们可以在父布局指定，同时需要在decoration种指定透明色，不然会被覆盖。

Container(
              height: 40,
             decoration: BoxDecoration(
                  border: Border(
                      bottom: BorderSide(
                          width: 0.5,
                          color:  Colors.red),
                      top: BorderSide(
                          width: 0.5,
                          color: Colors.red))),
              width: double.infinity,
              child: TextField(
                 textAlign: TextAlign.center,
                controller: inputController,
                maxLines: 1,
                decoration: InputDecoration(
                  enabledBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                      borderRadius: BorderRadius.circular(0)),
                  focusedBorder: OutlineInputBorder(
                      borderSide: BorderSide(color: Colors.transparent),
                      borderRadius: BorderRadius.circular(0)),
                )

                ),
              ),
            ))