时间戳

首页 > 解决方案 > 是否可以在文本和下划线之间有一定高度的文本下划线？

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

问题描述

今天我正在尝试制作sticker.ly 应用程序UI。但我坚持在下划线和文本之间添加空格。这是我的代码

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')。有没有办法以更好的方式做到这一点？

标签： flutterflutter-layout

解决方案

这是一个简单的hacky方法：

Text(
            "Forgot Password?",
            style: TextStyle(
              shadows: [
                Shadow(
                    color: Colors.red,
                    offset: Offset(0, -5))
              ],
              color: Colors.transparent,
              decoration:
              TextDecoration.underline,
              decorationColor: Colors.blue,
              decorationThickness: 4,
              decorationStyle:
              TextDecorationStyle.dashed,
            ),
          )

我写了一篇关于文本下划线和其他一些解决方案的文章，但这是我最喜欢的。

推荐阅读