Flutter 115: 图解自定义 View 之 Canvas (四) drawParagraph

简介: 0 基础学习 Flutter,第一百一十五节:自定义 Canvas 第四节,文本绘制小结!

    小菜在前两节通过 Canvas 绘制图形时涉及到部分文字绘制,之前只是简单的尝试,有很多未注意到的地方;小菜今天尝试全面的学习尝试一下;通过 Canvas 绘制文字时使用的属性效果与直接使用 TextView 对应基本一致;

Canvas.drawParagraph

  1. 新建一个 ParagraphBuilder 段落构造器;
  2. 在构造器中添加文本的基本信息,包括 ParagraphStyle 文本属性等;
  3. 通过 ParagraphConstraints 约束段落容器宽度;
  4. 通过 layout 计算段落中每个字形的大小和位置;
  5. 通过 Canvas.drawParagraph 进行文字绘制;
// 1-2 段落构造器并添加文本信息
ParagraphBuilder _pb = ParagraphBuilder(
    ParagraphStyle(fontWeight: FontWeight.normal, fontSize: 17))
  ..pushStyle(ui.TextStyle(color: Colors.blue))
  ..addText(str);
// 3 设置段落容器宽度
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
// 4 计算文本位置及尺寸
Paragraph paragraph = _pb.build()..layout(pc);
// 5 文本绘制
canvas.drawParagraph(paragraph, Offset(50.0, 50.0));
AI 代码解读

ParagraphStyle

1. fontSize

    fontSize 为字体绘制时字号,以逻辑像素为单位;

fontSize: 14.0 + (i + 1)
AI 代码解读

2. fontWeight

    fontWeight 用于绘制文本的字形的粗细,从 w100 -> w900 逐级变粗;默认是 w400

fontWeight: FontWeight.values[i + 1],
AI 代码解读

3. fontStyle

    fontStyle 为字体样式,是否为 normal 正规或 italic 斜体;

fontStyle: (i % 2 == 0) ? FontStyle.normal : FontStyle.italic,
AI 代码解读

4. fontFamily

    fontFamily 为文字的字体,使用其他字体时需要倒入字体包资源文件并在 pubspec.yaml 中进行资源文件注册声明;可以从 Google Fonts 字体库中选择适当的字体类型;

fontFamily: 'DancingScript',
// pubspec.yaml
flutter:
  fonts:
    - family: DancingScript
      fonts:
        - asset: images/DancingScript-Regular.ttf
AI 代码解读

    小菜在添加字体时,遇到 A dependency specification must be a string or a mapping. 问题,其原因是字体资源的注册需要在 flutter: 中添加,而不是在 dependencies: 依赖中添加,dependencies: 都是添加的依赖键值对;

5. maxLines & ellipsis

    maxLines 为段落最长绘制行数,一般与 ellipsis 通过使用,ellipsis 为最后绘制不完时展示的文本内容;

maxLines: 4,
ellipsis: '...',
AI 代码解读

6. textDirection & textAlign

    textDirection & textAlign 的使用是小菜觉得应当注意的地方;textDirection 为文字绘制方向,ltrleft-to-right 从左至右;rtlright-to-left 从右至左,类似于 'ar/fa/he/ps/ur' 阿拉伯语和希伯来语等;textAlign 为文本的对齐方式;

    使用 rtl 方式时,标点均会展示在左侧,符合从右向左的绘制顺序;TextAlign 对齐方式注意区分 left / startright / end 的不同;

  • TextAlign.center 文本内容居中
  • TextAlign.justifyTextDirection 设置为准,自动延展填充至容器宽度
  • TextAlign.left 均与容器左侧对齐
  • TextAlign.startTextDirection 设置为准,开始位置进行对齐
  • TextAlign.right 均与容器右侧对齐
  • TextAlign.endTextDirection 设置为准,结束位置进行对齐
textAlign: _paragraphTextAlign(i),
textDirection: (i % 2 == 0) ? TextDirection.ltr : TextDirection.rtl,

// TextAlign & TextDirection
enum TextAlign { left, right, center, justify, start, end, }
enum TextDirection { ltr, rtl }
AI 代码解读

7. height

    height 简单理解为行高,但并非完全与 fontSize 倍数一致;

height: 2,
AI 代码解读

8. strutStyle

    strutStyle 小菜理解为段落高度属性,通过设置一系列垂直方向的维度定义更高级的行高属性;其中 StrutStyle 设置的 fontSize / fontFamily 等都是以此为基准线,借此改变的是段落行高,而不会改变段落文本属性(字号/字体等);

ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(
  height: 2, fontSize: 17,
  strutStyle: ui.StrutStyle(fontFamily: 'DancingScript', fontSize: 20, height: 2),
))
AI 代码解读

ParagraphBuilder

1. pushStyle()

    pushStyle() 将给定的 TextStyle 样式添加到文本属性中,包括文字的颜色,背景等一系列样式;

    TextStyle 中涉及多种文本样式,对于与 ParagraphStyle 段落属性相同的 fontSize / fontFamily 等,以 TextStyle 为准;其中对于文本颜色,color 不能与 foreground 一同使用;wordSpacing 为单词间隔,letterSpacing 为文字字母之间间隔,两者要有区分;

var _gradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.orange, Colors.deepOrange, Colors.green],
    [0 / 3, 1 / 3, 2 / 3]);
var _bgGradient = ui.Gradient.linear(
    Offset(0.0, 0.0),
    Offset(0.0, size.height),
    [Colors.blueGrey, Colors.white, Colors.grey],
    [0 / 3, 1 / 3, 2 / 3]);
var _shadow = [
  Shadow(offset: Offset(2.0, 2.0), blurRadius: 4.0, color: Colors.grey)
];
ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 17))
  ..pushStyle(ui.TextStyle(
      // color: Colors.green,
      foreground: Paint()..shader = _gradient,
      // background: Paint()..shader = _bgGradient,
      fontSize: 20,
      fontWeight: FontWeight.w700,
      wordSpacing: 4,
      letterSpacing: 2,
      shadows: _shadow))
  ..addText(str);
ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
Paragraph paragraph = _pb.build()..layout(pc);
canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));
AI 代码解读

2. addText()

    addText() 将给定的文本添加到段落中,并以设置好的段落样式进行绘制;

3. addPlaceholder()

    addPlaceholder() 为文字绘制中设置占位区域;若在 addText() 之前设置优先展示占位区域在进行文本绘制,若在之后设置则是文本绘制结束后添加占位;且有多种垂直占位对齐方式;

for (int i = 0; i < 3; i++) {
  ParagraphBuilder _pb = ParagraphBuilder(ParagraphStyle(fontSize: 18))
    ..pushStyle(ui.TextStyle(
        foreground: Paint()..shader = _gradient,
        fontWeight: FontWeight.w700, wordSpacing: 4));
  if (i == 0) {
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
    _pb = _pb..addText(str);
  } else {
    _pb = _pb..addText(str);
    _pb = _pb..addPlaceholder(60, 60, i <= 1 ? PlaceholderAlignment.bottom : PlaceholderAlignment.middle);
  }
  ParagraphConstraints pc = ParagraphConstraints(width: size.width - 100);
  Paragraph paragraph = _pb.build()..layout(pc);
  canvas.drawParagraph(paragraph, Offset(50.0, 50 + _spaceHeight));
  canvas.drawRect(
      Rect.fromPoints(Offset(49.0, 50.0 + _spaceHeight),
          Offset(size.width - 49, 50.0 + paragraph.height + _spaceHeight)),
      _paint..shader = _gradient);
  _spaceHeight += paragraph.height;
}
AI 代码解读

    小菜对于 Canvas.drawParagraph 的尝试暂时到目前为止,还有很多特有属性会在实际过程中进行研究尝试;如有错误,请多多指导!


    Canvas.drawParagraph 案例源码


来源: 阿策小和尚
目录
打赏
0
0
0
0
115
分享
相关文章
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
122 75
【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
87 18
【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
Flutter&鸿蒙next 的 Sliver 实现自定义滚动效果
Flutter 提供了强大的滚动组件,如 ListView 和 GridView,但当需要更复杂的滚动效果时,Sliver 组件是一个强大的工具。本文介绍了如何使用 Sliver 实现自定义滚动效果,包括 SliverAppBar、SliverList 等常用组件的使用方法,以及通过 CustomScrollView 组合多个 Sliver 组件实现复杂布局的示例。通过具体代码示例,展示了如何实现带有可伸缩 AppBar 和可滚动列表的页面。
180 1
|
4月前
Flutter 自定义组件继承与调用的高级使用方式
本文深入探讨了 Flutter 中自定义组件的高级使用方式,包括创建基本自定义组件、继承现有组件、使用 Mixins 和组合模式等。通过这些方法,您可以构建灵活、可重用且易于维护的 UI 组件,从而提升开发效率和代码质量。
164 1
深入探索 Flutter 鸿蒙版的画笔使用与高级自定义动画
本文深入探讨了 Flutter 中的绘图功能,重点介绍了 CustomPainter 和 Canvas 的使用方法。通过示例代码,详细讲解了如何绘制自定义图形、设置 Paint 对象的属性以及实现高级自定义动画。内容涵盖基本绘图、动画基础、渐变动画和路径动画,帮助读者掌握 Flutter 绘图与动画的核心技巧。
102 1
Flutter&鸿蒙next中的按钮封装:自定义样式与交互
在Flutter应用开发中,按钮是用户界面的重要组成部分。Flutter提供了多种内置按钮组件,但有时这些样式无法满足特定设计需求。因此,封装一个自定义按钮组件变得尤为重要。自定义按钮组件可以确保应用中所有按钮的一致性、可维护性和可扩展性,同时提供更高的灵活性,支持自定义颜色、形状和点击事件。本文介绍了如何创建一个名为CustomButton的自定义按钮组件,并详细说明了其样式、形状、颜色和点击事件的处理方法。
117 1
Flutter & 鸿蒙next版本:自定义对话框与表单验证的动态反馈与错误处理
在现代移动应用开发中,用户体验至关重要。本文探讨了如何在 Flutter 与鸿蒙操作系统(HarmonyOS)中创建自定义对话框,并结合表单验证实现动态反馈与错误处理,提升用户体验。通过自定义对话框和表单验证,开发者可以提供更加丰富和友好的交互体验,同时利用鸿蒙next版本拓展应用的受众范围。
140 1
Flutter 35: 图解自定义 View 之 Canvas (二)
0 基础学习 Flutter,第三十五步:自定义 View 第三节~
4728 0
Flutter 36: 图解自定义 View 之 Canvas (三)
0 基础学习 Flutter,第三十六步:自定义 View 第四节~
2053 0
Flutter 34: 图解自定义 View 之 Canvas (一)
0 基础学习 Flutter,第三十四步:自定义 View 第二节~
2690 0

热门文章

最新文章

  • 1
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    10
  • 2
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    30
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    70
  • 4
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    1
  • 5
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    15
  • 6
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    8
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    3
  • 8
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    25
  • 9
    通过外部链接启动 Flutter App(详细介绍及示例)
    14
  • 10
    Flutter 61: 图解基本 Button 按钮小结 (一)
    2
  • 1
    flutter3-wetrip跨平台自研仿携程app预约酒店系统模板
    25
  • 2
    通过外部链接启动 Flutter App(详细介绍及示例)
    21
  • 3
    【01】噩梦终结flutter配安卓android鸿蒙harmonyOS 以及next调试环境配鸿蒙和ios真机调试环境-flutter项目安卓环境配置-gradle-agp-ndkVersion模拟器运行真机测试环境-本地环境搭建-如何快速搭建android本地运行环境-优雅草卓伊凡-很多人在这步就被难倒了
    129
  • 4
    零基础构建即时通讯开源项目OpenIM移动端-Flutter篇
    79
  • 5
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    51
  • 6
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    159
  • 7
    【09】flutter首页进行了完善-采用android studio 进行真机调试开发-增加了直播间列表和短视频人物列表-增加了用户中心-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    48
  • 8
    当flutter react native 等混开框架-并且用vscode-idea等编译器无法打包apk,打包安卓不成功怎么办-直接用android studio如何打包安卓apk -重要-优雅草卓伊凡
    76
  • 9
    【08】flutter完成屏幕适配-重建Android,增加GetX路由,屏幕适配,基础导航栏-多版本SDK以及gradle造成的关于fvm的使用(flutter version manage)-卓伊凡换人优雅草Alex-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    164
  • 10
    【07】flutter完成主页-完成底部菜单栏并且做自定义组件-完整短视频仿抖音上下滑动页面-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
    87
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等