在flutter中，如何添加一个看起来像带有下划线的文本字段的大纲按钮？

Question

在flutter中，如何添加一个看起来像带有下划线的文本字段的大纲按钮？ 我只需要一个底部下划线。

           OutlineButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).textTheme.bodyText1.color,
              // disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
              borderSide: (),
              onPressed: () {

              },
          child: Center(
            child: Text(
              "No Reminder",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0),
            ),
          ),
            )

Answer 1

GestureDetector(
  onTap: () => print('tapped'),
  child: Container(
    // optional
    padding: const EdgeInsets.only(bottom: 1.0),
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
            width: 2.0, color: Colors.lightBlue.shade900))),
    child: Text('button')),
)

我不知道结果会如何，但我希望它有助于给你想法来满足你的需要

Answer 2

您可以使用 BoxDecoration 作为按钮的父级。 OutlineButton 勾勒出所有 4 个边或没有。 在此处查看他们的文档https://api.flutter.dev/flutter/painting/BorderSide-class.html

Answer 3

如果我正确理解你的问题，你只需要添加文本的decoration属性并将TextDecoration.underline传递给它，以实现底部下划线。 下面的工作示例代码：

body: Center(
        child: OutlineButton(
              color: Theme.of(context).buttonColor,
              textColor: Theme.of(context).textTheme.bodyText1.color,
              // disabledColor: Colors.grey,
              disabledTextColor: Colors.black,
            //  borderSide: (),
              onPressed: () {

              },
          child: Center(
            child: Text(
              "No Reminder",
              textAlign: TextAlign.center,
              style: TextStyle(fontSize: 18.0, decoration: TextDecoration.underline),
            ),
          ),
            )
      ),

希望这能回答你的问题。