Flutter：轮廓输入边框答案

【问题标题】：Flutter: Outline input borderFlutter：轮廓输入边框
【发布时间】：2019-06-06 04:46:30
【问题描述】：

我试图为我的文本字段构建一个边框，例如：

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

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

【问题讨论】：

不完全回答您的问题，而只是为 TextField 添加边框这有效：TextField(decoration: InputDecoration(border: OutlineInputBorder(borderSide: BorderSide(),),),); 更多信息：api.flutter.dev/flutter/material/OutlineInputBorder-class.html

标签： dart flutter textfield

【解决方案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',
        ),
    ),

【讨论】：

我在InputDecoration 中找不到focusedBorder 属性
@AshutoshSagar 你正在运行什么版本的颤振。？
v1.0.0 是稳定版
为我工作。谢谢！

【解决方案2】：

您可以使用 Container 为您的文本字段添加边框。将 TextField 作为孩子添加到 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,
        ),
      ),
    )

【讨论】：

【解决方案3】：

对于其他来这里只是想要一个带有边框的TextField：

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

【讨论】：

【解决方案4】：

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

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

Live Demo

【讨论】：