Flutter TextField InputDecoration OutlineInputBorder 黑边（ + 改边框颜色 + 设背景色等）

最新推荐文章于 2024-12-14 09:54:13 发布

原创最新推荐文章于 2024-12-14 09:54:13 发布 · 6.5k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#flutter

本文详细介绍了在Flutter中如何使用TextField组件自定义边框样式，包括在不同状态下的边框颜色调整，如普通状态、聚焦状态和错误状态。通过设置border、focusedBorder和errorBorder等属性，可以实现丰富的视觉效果。

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

示例：

          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) {},
            ),