0%

Flutter TextField InputDecoration Border 黑边

整一个 TextField 的边框效果,拿 border: 尝试了半天,普通状态下总有个黑边,自定义的颜色也没看到,再看了眼 TextField 的一堆属性,突然发现 TextField 不仅有 border ,还有 errorBorderfocusedBorderfocusedBorderfocusedErrorBorderdisabledBorderenabledBorder 这几个 border …… 好了,问题解开 😂

示例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
TextField(
onChanged: (str) {},
decoration: InputDecoration(
border: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white.withOpacity(0.5), // 边框颜色
),
),
enabledBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.white.withOpacity(0.3), // 边框颜色
),
),
filled: true, // 不然 fillColor 等 不生效
fillColor: Colors.white.withOpacity(0.6),
focusColor: Colors.white.withOpacity(0.5),
hoverColor: Colors.white.withOpacity(0.3),
),
maxLines: 1,
keyboardType: TextInputType.text,
onSubmitted: (text) {},
),