在 Flutter 中更改 TextField 的边框颜色 - C#

Flutter 是一个跨平台的移动应用开发框架，它支持多种平台的开发，例如 iOS、Android 和 Web。在 Flutter 中创建文本输入框（TextField）非常容易，但有时您可能想要自定义文本输入框边框的颜色。在本文中，我们将向您展示如何在 Flutter 中更改 TextField 的边框颜色。

步骤

以下是在 Flutter 中更改 TextField 的边框颜色的步骤：

1. 定义 TextField

首先，您需要定义一个 TextField 并指定其外观，这将是 EditText 的外部样式：

TextField(
  decoration: InputDecoration(
    hintText: 'Enter value',
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2.0),
    ),
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1.0),
    ),
  ),
);

在上面的代码中，我们为 TextField 定义了一个 InputDecoration，该 InputDecoration 包含 hintText，以及两个 OutlineInputBorder，用于设置 TextField 的边框。

• focusedBorder 用于设置文本输入框（TextField）聚焦时的边框颜色和宽度。在本例中，我们将边框颜色设置为蓝色，宽度为2.0。
• enabledBorder 用于设置文本输入框（TextField）未聚焦时的边框颜色和宽度。在本例中，我们将边框颜色设置为灰色，宽度为1.0。

2. 完整示例

以下是完整的示例：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final TextEditingController _textController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: TextField(
          controller: _textController,
          decoration: InputDecoration(
            hintText: 'Enter value',
            focusedBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.blue, width: 2.0),
            ),
            enabledBorder: OutlineInputBorder(
              borderSide: BorderSide(color: Colors.grey, width: 1.0),
            ),
          ),
        ),
      ),
    );
  }
}

3. 运行

您可以将上面的代码复制到您的 Flutter 项目中，并在模拟器或设备上运行该应用程序，应用程序将显示一个具有自定义边框颜色的文本输入框。

结论

在本文中，我们向您展示了如何在 Flutter 中更改 TextField 的边框颜色。我们使用 InputDecoration 和 OutlineInputBorder 来定义 TextField 的外观。

如有任何疑问或困惑，请在下面的评论部分留言。