Question

我想在禁用时更改 TextFiled 下划线颜色

child: TextField(
    ***enabled: false,***
    controller: resultController,
    style: TextStyle(
        color: Colors.orange, fontSize: 18, fontWeight: FontWeight.bold),
    keyboardType: TextInputType.number,
    decoration: InputDecoration(
        enabledBorder:  UnderlineInputBorder(
            borderSide: BorderSide(color: Colors.white)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white)),
  ),

Answer 1

我不确定是否有一种方法可以用来检查 TextField 是否被禁用，但您可以这样做的一种方法是创建一个 bool 来跟踪 {{ 1}} 已禁用。

创建布尔值

TextField

创建一个改变值的函数

bool isDisabled = false;

检查代码中 Function<void> changeDisabled() { setState() { isDisabled ? isDisabled = false : isDisabled = true } } 的状态。

isDisabled

Answer 2

您可以使用 disabledBorder 的 InputDecoration 属性指定禁用 TextField 的下划线颜色，例如：

 InputDecoration(
        enabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.white)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white),
        disabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
      ),

或在 ThemeData 中指定它，如：

 MaterialApp(
      theme: ThemeData.light().copyWith(
          inputDecorationTheme: InputDecorationTheme(
        disabledBorder:
            UnderlineInputBorder(borderSide: BorderSide(color: Colors.green)),
      )),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }

Answer 3

看看下面的代码，它会很容易地解决你的问题：

TextField(
            decoration: InputDecoration(
              hintText: "Your hint here",
              //defalult border
              border: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.green)),
              //disabled border
              disabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.grey)),
              //enabled border
              enabledBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.blue)),
              //error boreder
              errorBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.red)),
              //focused border
              focusedBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.purple)),
              //error while focused border
              focusedErrorBorder: OutlineInputBorder(
                  borderSide: BorderSide(width: 1, color: Colors.amber)),
            ),
          ),

禁用时如何更改 TextField 下划线边框颜色

3 个答案: