修改Flutter的TextField里的下划线

àì夳堔傛蜴生んèń 2022-11-20 03:58 240阅读 0赞

修改前TextField里的下划线颜色是跟着主题色走的

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70][]

添加以下代码

TextField(
                    autofocus: true,
                    focusNode: focusNode1,//关联focusNode1
                    decoration: InputDecoration(
                        labelText: "备注：",
                        labelStyle:TextStyle(color:Color(0x99000000)),
                        hintText:'请输入',
                        hintMaxLines:2,
                        // 主要添加以下代码
                      enabledBorder: new UnderlineInputBorder( // 不是焦点的时候颜色
                        borderSide: BorderSide(
                            color: Color(0x19000000)
                        ),
                      ),
                      focusedBorder: new UnderlineInputBorder( // 焦点集中的时候颜色
                        borderSide: BorderSide(
                            color: Color(0x19000000)
                        ),
                      ),
                    ),
                  ),

添加代码后的颜色

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70]: /images/20221120/3f1a66fb07d4464e91d5e4baeb21ca6b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmd3ZWlzY3Nkbg_size_16_color_FFFFFF_t_70 1]: /images/20221120/7bfc66a3cdc5414dafda5183449b643a.png