Flutter：轮廓输入边框

Question

我正在尝试为我的文本字段创建一个边框，例如：

return TextField(
  ...
 border: OutlineInputBorder(
  borderSide: BorderSide(
   color: Colors.red, 
    width: 5.0),
    )
  )
)

但它总是 return 宽度为 1.0 的黑色边框。我发现更改颜色的唯一方法是创建一个指定提示颜色的 ThemeData，但我找不到更改宽度的方法。

Answer 1

您要查找的是 InputDecoration 中的 enabledBorder 属性。

如果您想更改焦点使用的边框 - focusedBorder

    TextField(
        decoration: new InputDecoration(
            focusedBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.greenAccent, width: 5.0),
            ),
            enabledBorder: OutlineInputBorder(
                borderSide: BorderSide(color: Colors.red, width: 5.0),
            ),
            hintText: 'Mobile Number',
        ),
    ),

Answer 2

您可以使用 Container 为您的文本字段添加边框。将 TextField 作为子项添加到 Container 中，该 Container 具有带边框属性:

的 BoxDecoration

  Container(
      margin: EdgeInsets.all(10),
      padding: EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.white,
        border: Border.all(
            color: Colors.red,// set border color
            width: 3.0),   // set border width
        borderRadius: BorderRadius.all(
            Radius.circular(10.0)), // set rounded corner radius
      ),
      child: TextField(
        decoration: InputDecoration(
          hintText: 'Label text',
          border: InputBorder.none,
        ),
      ),
    )

Answer 3

对于那些只想 TextField 周围有边框的来这里的人：

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

Answer 4

您可以通过覆盖顶层的 ThemeData 来全局更改 TextField 或 TextFormField 的概述变体：

return MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: const InputDecorationTheme(border: OutlineInputBorder()),
  ),
)

Flutter：轮廓输入边框

Flutter: Outline input border

textfield

dart

flutter

Live Demo