Flutter Text 下面有两个默认的下划线，和设置划掉效果

最新推荐文章于 2024-02-29 09:41:44 发布
最新推荐文章于 2024-02-29 09:41:44 发布
阅读量2.1w 收藏 6
点赞数 5
文章标签： Flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_34120295/article/details/86496657
版权

Text的decoration默认是TextDecoration.none

不知道什么原因，有时候定义的Text下面会出现两个下划线，如下图：

此时要去掉下面的下划线只需要在style下面的TextStyle增加属性decoration: TextDecoration.none

 

其次加个扩展，若想加划掉的效果，如下图：

可通过设置如下属性：

笨鸟不飞 ≧０≦
关注
  • 5
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Flutter Text内容居中显示
01-07
通过设置textAlign属性的值为TextAlign.center可以让Text的内容居中 class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Row( children: [ Expanded( chil
flutter Text 下划线，删除线，虚线，加粗，斜体等设置方案
01-08
import ‘package:flutter/material.dart’; void main(){ runApp( MaterialApp( title:‘Text Demo’, home:ContainerDemo() ), ); } class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(‘文本组件’), ), body: Column( children: [ Te
Flutter Text 下划线
最新发布
mengshirui_的博客
02-29 645
flutter text 下划线间隔，自定义下划线
flutter_text
04-06
flutter_text 自学中Flutter 首先学习的是组件这一部分。 目前整理学习的只有几个组件而已 ·滑块 slider ·装饰 decoratedBox ·文本输入框 InpuText ·CheckBox组件 ·GridView组件 ·RaisedButton组件 ·折叠组件
flutter-masked-text:Flutter的遮罩文字
05-06
flutter_masked_text 遮罩的文本输入，使内容更加流畅。 警报 嗨，大家好！ 不幸的是，我不再开发移动设备了。 此存储库将不会收到更新。 安装 遵循本 用法 导入库 import 'package:flutter_masked_text/flutter_masked_text.dart' ; MaskedText 创建您的遮罩控制器： var controller = new MaskedTextController (mask : '000.000.000-00' ); 将控制器设置为您的文本字段： return new MaterialApp ( title : 'Flutter Demo' , theme : new ThemeData ( primarySwatch : Colors .blue, ), h
text_composition:flutter中文版，支持分页上下拆分分为两部分
03-26
text_composition flutter中文版分页上下拆分分割拆分多栏布局 弃用richText，使用画布，精确定位绘图位置，消除字体对放置影响 演示视频 特色 中文英文符号混排对齐对齐 支持非等高字体 支持非等宽字体 按容器高度分页 上下分散对齐 多栏布局 翻页切换动画 页面阴影 键盘响应 支持标题title与titleStyle 支持链接link和linkStyle link点击事件 图片 例子 /example/lib/main.dart 字体会影响显示效果 使用画布绘图不受不受字体影响任意字体都可以上下对齐分割对齐 windows自带字体效果（非等宽非等高） 腾祥嘉丽.ttf字体效果
Flutter Text 实现下划线、波浪线、删除线、背景色、渐变文字、阴影、描边、空心字
xhuww的博客
09-22 1万+
Flutter Text 实现下划线、波浪线、删除线，添加文字背景色，设置渐变文字、添加阴影、描边，实现空心文字。
【Flutter】Flutter Text 控件实现下划线、删除线、虚线、加粗、斜体
Code Metaverse
07-27 3726
在 Flutter 开发中，我们经常需要对 Text 控件进行各种样式的设置，包括但不限于下划线、删除线、虚线、加粗和斜体等。这些样式的设置可以帮助我们更好地展示文本内容，提升用户体验。
flutter text下划线
rf344541393的博客
05-31 965
在Flutter中，Text组件是属于Material风格的，这就要求我们的根组件最好也是Material风格的，否则UI展示可能会有一些问题。刚刚提到的启动页，根组件直接使用的层叠布局Stack，而Stack就不属于Material风格，当Stack内部嵌套Text的时候就会出现文字下方带有两条黄色下划线的现象。2.针对出现问题的Text组件，修改其style下的decoration属性为TextDecoration.none。加了一个弹窗，弹窗中的文字有黄色下划线， 很奇怪，原来是这个原因。
Flutter Text文字下方出现黄色双下划线
Steve_XiaoHai的博客
01-26 1158
在Flutter中，Text组件是属于Material风格的，这就要求我们的根组件最好也是Material风格的，否则UI展示可能会有一些问题。刚刚提到的启动页，根组件直接使用的层叠布局Stack，而Stack就不属于Material风格，当Stack内部嵌套Text的时候就会出现文字下方带有两条黄色下划线的现象。
Flutter Text(Flutter文本显示和样式)
10-05
Text Widget用于显示简单样式文本，它包含一些控制文本显示样式的一些属性，类似于Android中的TextView
Flutter Text 去掉黄色下划线
冬无雪的博客
06-30 5519
Flutter 中如果没有使用Material的话Text会有黄色的下划线， 解决方法： 在Text 样式style 中加入属性decoration: TextDecoration.none 如下： Text( '加载中', style: TextStyle( fontSize: 17, color: Color(0xff3c3c3c), de
Flutter TextField怎样去除下划线及有焦点时颜色
欢迎加入Android老司机学院 482266514（技术交流群）密码CSDN
12-21 1332
修改方法 只有把 enabledBorder: new UnderlineInputBorder focusedBorder: new UnderlineInputBorder 设置为 borderSide: BorderSide.none, 即可，修改焦点时颜色都可以在这里定义 Container( padding: EdgeInsets.only(left: 18.0, right: 18.0), height: 15
Flutter TextFiled去掉下划线
徐代龙的技术专栏
07-11 2780
Flutter系统自带的TextFiled都带有下划线，有时候我们并不需要 此时我们只需要在decoration中加入一下代码： Container( alignment: Alignment.topLeft, child: TextField( maxLines: 10, onChanged: _textFieldChanged, ...
Flutter Text文本删除线、下划线设置
代码小疯子
01-08 2730
Flutter Text decoration: TextDecoration.lineThrough 下划线
Flutter 文字与边框(下划线)距离
维基百科
10-28 5481
TextField( decoration: InputDecoration( contentPadding: EdgeInsets.only(top: 2.0, bottom: 6.0),//设置文字内容与边框距离 enabledBorder: UnderlineInputBorder( borderSide: BorderSide( ...
Flutter基础—常用控件之文本
咖啡花园
11-16 6969
Text控件即容器，是一个常用的控件，下面的实例有7个不同样式的文本控件：import 'package:flutter/material.dart'; class ContainerDemo extends StatelessWidget { @override Widget build(BuildContext context) { return new Scaffold(
flutter控件添加下划线，就是边框只显示底部，添加分隔线
热门推荐
xiaoqi307的博客
06-22 2万+
new Container( height: 35, width: MediaQuery.of(context).size.width - 140, decoration: BoxDecoration( border:Border(bottom:BorderSide(width: 1,col...
flutter text 自定义下划线
05-09
Flutter Text Widget是Flutter Framework中用于呈现文本的Widget之一。该Widget可以显示单行或者多行文本，并且支持文字样式、对齐方式、文本溢出方式、行间距等多种属性的设置。在使用Text Widget的过程中，我们可能需要自定义下划线的样式来美化文本。 实现自定义下划线有多种方法，下面我们介绍其中一种方法： 在Text Widget的child组件内添加CustomPaint Widget，通过CustomPainter来绘制下划线。 例如，下面的示例演示了如何使用CustomPainter来绘制一条黑色且宽度为2.0的下划线。 ```dart Text( 'Hello, world!', style: TextStyle(fontSize: 24), textAlign: TextAlign.center, textDirection: TextDirection.ltr, maxLines: 1, overflow: TextOverflow.ellipsis, textScaleFactor: 1.5, // 添加下划线 child: CustomPaint( painter: LinePainter(), child: Text('Hello, world!'), ), ) // LinePainter绘制下划线 class LinePainter extends CustomPainter { @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = Colors.black ..strokeWidth = 2.0; canvas.drawLine(Offset.zero, Offset(size.width, 0), paint); } @override bool shouldRepaint(CustomPainter oldDelegate) => false; } ``` 通过上面的代码，我们可以看到，在Text Widget的child组件中添加了一个CustomPaint Widget，并通过LinePainter来绘制了下划线。在LinePainter中，我们通过canvas.drawLine方法来画一条宽度为2.0的黑色直线。同时，由于CustomPainter是在Widget绘制完成后才执行的，因此下划线可以自动适应Text Widget的宽度。 在实现自定义下划线的时候，我们可以根据需求来自定义不同的下划线样式。例如，可以通过paint.color、paint.strokeWidth等属性来设置下划线的颜色、宽度等。如果需要实现复杂的下划线效果，也可以通过绘制曲线、添加阴影、使用渐变色等方式来实现。 总结来说，通过在Text Widget的child组件中添加CustomPaint Widget，再通过CustomPainter来绘制下划线，是一种简单且灵活的自定义下划线的方法。在实际开发中，我们可以根据实际需求来灵活应用，实现不同样式的下划线。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值