禁用時如何更改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)),
            ),
          ),