自定义边框

1.取消默认的下划线边框

TextField(
        decoration: InputDecoration(
          ///边框
          border: InputBorder.none,
        ),
      )

如果只是设置了 border 属性，那么其他的状态都是一样，如果想在其他的状态下显示不一样的边框就再设置，比如在焦点的状态下现在不一样

TextField(
            decoration: InputDecoration(
              ///边框
              border: InputBorder.none,
              ///焦点下的边框
              focusedBorder: OutlineInputBorder(
                ///边框角度的大小
                borderRadius:  BorderRadius.all(Radius.circular(20.0)),
                borderSide: BorderSide(
                  ///边框的颜色
                  color: Colors.greenAccent,
                  ///边框线的大小
                  width: 0.5,
                ),
              ),
            ),
          )

自定义框.gif

2.高度

这里我们来讲三种实际中比较经常用到的，一是单行的高度，这里就是修改默认的内距，还有一种比如意见反馈等等的固定多行形式的高度，还有一个自适应高度

• 单行的高度

TextField(
          decoration:InputDecoration(
          isCollapsed: true,
          contentPadding:EdgeInsets.symmetric(vertical: 10, horizontal: 10),
          border:OutlineInputBorder()
      ),
),

device-2021-11-26-141952.png

• 多行形式的高度（固定高度）

TextField(
           maxLines: 2,
           decoration:InputDecoration(
             border:OutlineInputBorder()
           ),
 ),

device-2021-11-26-143142.png

• 自适应高度

TextField(
              maxLines: null,//这个设为null，因为默认是为1
              keyboardType: TextInputType.multiline,//修改键盘类型
              decoration:InputDecoration(
                  border:OutlineInputBorder()
              ),
),

这个你会发现随着行数越多，输入框就越高，所以通常会给一个限高

ConstrainedBox(
            constraints: BoxConstraints(
              maxHeight: 100,//限高100
            ),
            child: TextField(
              maxLines: null,//这个设为null，因为默认是为1
              keyboardType: TextInputType.multiline,//修改键盘类型
              decoration:InputDecoration(
                  border:OutlineInputBorder()
              ),
            ),
)

3.背景

TextField(
            decoration:InputDecoration(
              filled: true,
              fillColor: Color(0xfff1f1f1),
                border:_outlineInputBorder,
               focusedBorder: _outlineInputBorder,
               enabledBorder: _outlineInputBorder,
              // disabledBorder: _outlineInputBorder,
              // focusedErrorBorder: _outlineInputBorder,
              // errorBorder: _outlineInputBorder,
            ),
          )
OutlineInputBorder _outlineInputBorder = OutlineInputBorder(
    borderRadius: BorderRadius.all(Radius.circular(30.0)),
    borderSide: BorderSide(
      color: Color(0xfff1f1f1),
      width: 0.5
    ),
  )

device-2021-11-26-152104.png