Flutter 如何制作一个有 HintText 但没有下划线的 TextField ？

在Flutter中，创建一个带有HintText但没有下划线的 TextField可以通过使用 InputDecoration类来实现。InputDecoration类允许你定制输入框的外观，包括提示文本、边框样式等等。

以下是一个具体的实现步骤和示例代码：

1. 使用 TextField控件: 首先，你需要一个 TextField控件来允许用户输入文本。
2. 定制 InputDecoration: 通过设置 TextField的 decoration属性来实现。你需要使用 InputDecoration类，并设置 hintText属性来显示提示文本。为了去除下划线，可以将 border属性设置为 InputBorder.none。
3. 调整其他样式: 如果需要，可以调整文字的样式或其他装饰性元素，比如填充(padding)、颜色等。

下面是一个简单的示例代码：

dart
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("No Underline TextField Example")),
        body: Center(
          child: TextField(
            decoration: InputDecoration(
              hintText: "Enter your name",
              border: InputBorder.none, // 无边框
              fillColor: Colors.grey[200], // 设置背景色
              filled: true, // 开启填充模式
            ),
          ),
        ),
      ),
    );
  }
}

在这个例子中，TextField控件使用了 InputDecoration来显示灰色背景的输入框而不显示下划线，并带有提示文字"Enter your name"。这种方式使得输入框在界面上更为简洁，同时用户体验友好。