Flutter中TextField的一些问题

Flutter中TextField的一些问题

1、TextField组件文本垂直方向不居中的问题

（1）解决方法1：取消输入框

【注意】：用border: 会有问题，所以这里用border: OutlineInputBorder(borderSide: )

// contentPadding只需要设置水平方向就可以了
TextField(decoration: InputDecoration(contentPadding: EdgeInsets.symmetric(horizontal: 14.w),// border: , // 取消输入框的下划线border: OutlineInputBorder(borderSide: )),maxLines: 1,onChanged: (v) async {print(v);},
)

（2）解决方法2：设置contenPadding

步骤：a：计算文字的高度，b：垂直居中公式=(TextField的高度-文字高度)/2

// 计算文字的高度
var textPainter = TextPainter(text: TextSpan(text: '多关键词需空格隔开',style: TextStyle(fontSize: 14)),textDirection: TextDirection.ltr,textWidthBasis: TextWidthBasis.longestLine
)..layout();// 垂直居中公式=(TextField的高度-文字高度)/2
TextField(decoration: InputDecoration(contentPadding: EdgeInsets.symmetric(vertical: (32-textPainter.height)/2, horizontal: 14.w),)
)

2、改变TextField的边框颜色

TextField(decoration: InputDecoration(border: OutlineInputBorder(borderRadius: BorderRadius.circular(15),borderSide: BorderSide(color: Color(0xFFF5F5F5),), //这个不生效),// 未选中时候的颜色enabledBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(15),borderSide: BorderSide(color:Color(0xFFF5F5F5),),),// 选中时外边框颜色focusedBorder: OutlineInputBorder(borderRadius: BorderRadius.circular(15),borderSide: BorderSide(color:Color(0xFFF5F5F5),),),)
)