是否可以在文字和下划线之间有一定高度的文字下划线？

Question

今天，我试图让sticker.ly应用程序的用户界面在一个翩翩起舞。但我卡在添加下划线和文本之间的空间。这里是我的代码

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

而这里我想在 underline 和 Text('For You') ......有什么办法可以用更好的方式来实现吗？

Answer 1

你可以试试这样的东西。

Container(
padding: EdgeInsets.only(
  bottom: 3, // This can be the space you need betweeb text and underline
),
decoration: BoxDecoration(
  border: Border(bottom: BorderSide(
    color: Colors.black,
    width: 1.0, // This would be the width of the underline
  ))
),
child: Text(
  "For You",style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16, decoration: TextDecoration.underline,)
  ,),)

Answer 2

经过多次尝试，我能够解决这个问题。这是我的代码

import 'package:flutter/material.dart';

class Home extends StatefulWidget {
  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.all(13),
            margin: MediaQuery.of(context).padding,
            child: Column(
              children: <Widget>[
                Row(
                  children: <Widget>[
                    Text('For You', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 16,),),
                    SizedBox(width:8),
                    Text('Sticker', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                    SizedBox(width:8),
                    Text('Status', style: TextStyle(color: Colors.black54, fontWeight: FontWeight.bold, fontSize: 16),),
                  ],
                ),
                Row(children: <Widget>[
                  Padding(padding: EdgeInsets.symmetric(horizontal: 1, vertical: 5),
                  child: Container(
                    height: 3,
                    width: 52,
                    color: Colors.black,
                  ),
                  ),
                ],),
              ],
            ),  
          ),
          //search bar layout
          Container(
            child: Column(children: <Widget>[

            ],),
          ),
        ],
      ),
    );
  }
}