（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像

RichText：行内多样式的文字

import 'package:flutter/material.dart';class BasicDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {// 富文本显示richTextreturn RichText(text: TextSpan(text: 'www.liuan',style: TextStyle(color: Colors.deepPurpleAccent,fontSize: 34.0,fontStyle: FontStyle.italic,fontWeight: FontWeight.w100,),children: [TextSpan(text: '.mobi',style: TextStyle(fontSize: 17.0,color: Colors.grey))]),);}
}class TextDemo extends StatelessWidget {final TextStyle _textStyle = TextStyle(fontSize: 16.0,);final String _author = '李白';final String _title = '将进酒';@overrideWidget build(BuildContext context) {// 文字与文字样式return Text("《$_title》 --- $_author 君不见，黄河之水天上来，奔流到海不复回。君不见，高堂明镜悲白发，朝如青丝暮成雪。人生得意须尽欢，莫使金樽空对月。天生我材必有用，千金散尽还复来。烹羊宰牛且为乐，会须一饮三百杯。岑夫子，丹丘生，将进酒，杯莫停。与君歌一曲，请君为我倾耳听。(倾耳听 一作：侧耳听)钟鼓馔玉不足贵，但愿长醉不复醒。(不足贵 一作：何足贵；不复醒 一作：不愿醒/不用醒)古来圣贤皆寂寞，惟有饮者留其名。(古来 一作：自古；惟 通：唯)陈王昔时宴平乐，斗酒十千恣欢谑。主人何为言少钱，径须沽取对君酌。五花马，千金裘，呼儿将出换美酒，与尔同销万古愁。",textAlign: TextAlign.left,style: _textStyle,maxLines: 3,overflow: TextOverflow.ellipsis,);}
}

TextDemo 文字与文字的样式

Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像

class BasicDemo extends StatelessWidget {@overrideWidget build(BuildContext context) {// 富文本显示richTextreturn Container(// 颜色// color: Colors.grey[100],// 背景图像decoration: BoxDecoration(image: DecorationImage(image: NetworkImage('https://avatar.csdn.net/9/3/9/1_mp624183768.jpg?1544669678'),alignment: Alignment.topCenter,fit: BoxFit.cover,colorFilter: ColorFilter.mode(Colors.indigoAccent[400].withOpacity(0.5), BlendMode.hardLight)// repeat: ImageRepeat.repeatY)),child: Row(mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[Container(child: Icon(Icons.pool, size: 32.0, color: Colors.white),// color: Color.fromRGBO(3, 54, 255, 1.0),padding: EdgeInsets.only(left: 24.0, right: 8.0),margin: EdgeInsets.all(8.0),width: 90.0,height: 90.0,decoration: BoxDecoration(color: Color.fromRGBO(3, 54, 255, 1.0),// 区分设置// border: Border(//   top: BorderSide(//     color: Colors.indigoAccent[100],//     width: 3.0,//     style: BorderStyle.solid,//   ),//   bottom: BorderSide(//     color: Colors.indigoAccent[100],//     width: 3.0,//     style: BorderStyle.solid,//   ),// ),// 一起设置border: Border.all(color: Colors.redAccent[100],width: 3.0,style: BorderStyle.solid),// 圆角// borderRadius: BorderRadius.all(Radius.circular(16.0)),//单独设置圆角// borderRadius: BorderRadius.only(//   topLeft: Radius.circular(12),//   bottomRight: Radius.circular(12),//   bottomLeft: Radius.circular(12),//   topRight: Radius.circular(12),// ),// 形状shape: BoxShape.circle,// 渐变 镜像渐变// gradient: RadialGradient(//   colors: [//     Color.fromRGBO(7, 102, 255, 1.0),//     Color.fromRGBO(3, 28, 128, 1.0),//   ]// ),// 渐变 线性渐变gradient: LinearGradient(colors: [Color.fromRGBO(7, 102, 255, 1.0),Color.fromRGBO(3, 28, 128, 1.0),], begin: Alignment.topCenter, end: Alignment.bottomCenter),// 阴影boxShadow: [BoxShadow(offset: Offset(6.0, 7.0),color: Color.fromRGBO(16, 20, 188, 1.0),
// 模糊程度blurRadius: 25.0,
// 扩散程度 负的 缩小 正的 增大spreadRadius: -9.0)],),)],),);}
}

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像相关推荐

Flutter学习笔记（10）--容器组件、图片组件
如需转载,请注明出处:Flutter学习笔记(10)--容器组件.图片组件上一篇Flutter学习笔记(9)--组件Widget我们说到了在Flutter中一个非常重要的理念"一切皆为组件 ...
【Flutter】Flutter 项目中使用 Flutter 插件 ( Flutter 插件管理平台 | 搜索 Flutter 插件 | 安装 Flutter 插件 | 使用 Flutter 插件 )
文章目录一.Flutter 包和插件管理平台二.Flutter 插件搜索示例三.Flutter 插件装示例 1.添加 Dart 包依赖 2.获取 Dart 包 3.使用 Dart 包 4.官方的 ...
Flutter 中文文档：Flutter 中的布局
要点 widgets 是用于构建 UI 的类. widgets 可以用于布局和展示 UI 元素. 通过组合简单的 widgets 来构建复杂的 widgets. Flutter 布局的核心机制是 wi ...
flutter调用api_如何在Flutter（REST API）中进行API调用
flutter调用api 在本文中,我们将看一下如何快速进行API调用并使用简单的REST API. 在这里查看我在Flutter上的其他一些帖子: Flutter vs React Native 了 ...
Flutter图片添加水印功能，Flutter保存Widget为图片
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章添加水印,两种实现思路 ...
转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）...
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
Flutter开发之《头条 Flutter iOS 混合工程实践》笔记（54)
摘自:头条 Flutter iOS 混合工程实践从 App Store 下载或更新头条(6.9.2 或以上版本),找到懂车帝 -> 热门车型,点击打开后即可体验 Flutter 的页面效果. ...
【Flutter】如何写一个Flutter自动打包成iOS代码模块的脚本
相信很多使用原生+Flutter的iOS项目都会遇到混合开发的集成问题,也有大神写了一些解决方案,下面就记录一下我的心路历程: 前期准备开始之前,我先拜读了一些大神的文章(这里只挑出对我帮助最大的) ...
【Flutter】Flutter 混合开发 ( Flutter 与 Native 通信 | 在 Flutter 端实现 EventChannel 通信 )
文章目录一.EventChannel 简介二.EventChannel 在 Dart 端的实现 1.EventChannel 构造方法 2.创建广播流 Stream 3.设置监听回调函数 4.Ev ...

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像相关推荐

最新文章

热门文章

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器 装饰盒子 边框 圆角 阴影 形状 渐变 背景图像相关推荐

最新文章

热门文章

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像

（六）Flutter 基础部件 TextView 和TextStyle Flutter 容器装饰盒子边框圆角阴影形状渐变背景图像相关推荐