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

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来跟踪TextField是否被禁用。

1. 创建布尔

bool isDisabled = false;

2. 制作一个更改值的 function

Function<void> changeDisabled() {
setState() {
    isDisabled ? isDisabled = false : isDisabled = true
}
}

3. 检查代码中isDisabled的状态。

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: isDisabled ? Colors.white : Colors.black)),
        labelText: resultLableText,
        labelStyle: TextStyle(color: Colors.white)),
  ), 

Answer 2

您可以使用InputDecoration的disabledBorder属性指定 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)),
            ),
          ),