• flutter 中的样式
样式
width 320.0
height 240.0
color Colors.white,Colors.grey[300]
textAlign TextAlign.center
alignment Alignment.center
padding new EdgeInsets.all(16.0)
fontStyle FontStyle.italic
fontSize 24.0
fontWeight FontWeight.w900
fontFamily "Georgia"
shape BoxShape.circle
color 可以在Container的 decoration 属性中设置背景颜色
TextStyle bold24Roboto = new TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.w900,
);
  • 在Flutter中模拟CSS中max-width属性,请使用容器的constraints属性。创建一个新的BoxConstraints来设置minWidth或maxWidth。

  • 对于嵌套容器,如果父级的宽度小于子级宽度,则子级容器将自行调整大小以匹配父级。

  • 设置绝对位置

    默认情况下,widget相对于其父widget定位。

    要将widget的绝对位置指定为x-y坐标,请将其嵌套在Positioned widget中, 该widget又嵌套在Stack widget中。

  • 旋转组件

    要旋转一个widget,将它嵌套在一个Transform中。设置其alignment和origin属性分别以相对和绝对值指定变换原点。

    对于简单的2D旋转,widget在Z轴上旋转。(度数×π/ 180)

  • 缩放组件

    要向上或向下缩放widget,请将其嵌套在Transform中。 并设置其alignment和origin属性分别以相对和绝对值指定变换原点。

    对于沿x轴的简单缩放操作,请创建一个新的Matrix4, 标识对象并使用其scale()方法指定缩放因子。

    当缩放父widget时,所有子widget都会相应地缩放。

  • 圆角

    要给矩形添加圆角请使用BoxDecoration对象的borderRadius属性 。 创建一个新的BorderRadius对象,给该对象指定一个的半径(会四舍五入)。

  • 添加阴影

    在CSS中,您可以使用box-shadow属性来快速指定阴影偏移和模糊。

    在Flutter中,每个属性和值都单独指定。使用BoxDecoration的boxShadow属性创建BoxShadow列表。 您可以定义一个或多个BoxShadow,它们可以叠加出自定义阴影深度、颜色等。

  • 圆和椭圆

    在CSS中制作一个圆需要将矩形的四条边的border-radius设置为50%。

    虽然BoxDecoration的borderRadius属性支持此方法,但Flutter为此提供了一个shape属性, 值为BoxShape枚举 。

  • 调整文本间距

    在CSS中,通过分别给出letter-spacing和word-spacing属性的长度值,指定每个字母或单词之间的空白间距。长度单位可以是px,pt,cm,em等。

    在Flutter中,您将空白区域指定为Text的TextStyle的letterSpacing和wordSpacing属性, 值为逻辑像素(允许为负值)

  • 转换文本

    在HTML / CSS中,您可以使用text-transform属性执行简单大小写转换

    在Flutter中,使用 dart:core库中的String 类的方法来转换Text的内容。

    "Lorem ipsum".toUpperCase()

  • 进行内联格式更改

    Text widget控件,可以用相同的格式显示文本。 要显示使用多个样式的文本(在本例中为带有重点的单个单词),请改用RichText。 它的text属性可以指定一个或多个可单独设置样式的TextSpan widget。

  • 创建文本摘要

    摘录显示段落中文本的最初行,并且通常使用省略号处理溢出文本。在HTML / CSS中,摘要不能超过一行。截断多行需要一些JavaScript代码。

    在Flutter中,使用Text小部件的maxLines属性来指定要包含在摘要中的行数,以及用于处理溢出文本的属性overflow。

flutter 中的样式的更多相关文章

  1. Flutter中的基础组件之一

    一.Text文本组件(单一格式的文本) 是具有单一风格的文本字符串,可以跨多行显示,也可全部显示在同一行中,具体显示样子,取决于布局约束. 常用属性: 1.overflow : TextOverflo ...

  2. flutter中的表单使用

    Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框.CheckBox.Radio.Switch.CheckboxListTile.RadioListTile ...

  3. flutter中的按钮组件

    Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.IconButton.OutlineButton.ButtonBar.Floati ...

  4. flutter 中的AppBar

    在flutter中的很多页面中,都会有下面这段代码: 对应就是下图中的红色线框区域,被称作AppBar顶部导航. 项目准备 在使用AppBar之前,我们先新建一个tabBar的项目: 然后在pages ...

  5. Flutter 中的表单

    一.Flutter 常用表单介绍   Flutter 中常见的表单有 TextField 单行文本框,TextField 多行文本框.CheckBox.Radio.Switch  CheckboxLi ...

  6. Flutter 中的常见的按钮组件 以及自 定义按钮组件

    一.Flutter 中的按钮组件介绍   Flutter 里有很多的 Button 组件很多,常见的按钮组件有:RaisedButton.FlatButton.   IconButton.Outlin ...

  7. Flutter中的绘图(Canvas&CustomPaint)API

    本文是Flutter中Canvas和CustomPaint API的使用实例. 首先看一下我们要实现的效果: 结合动图演示,列出最终目标如下: 在程序运行后,显示一个小球: 每次程序启动后,小球的样式 ...

  8. android中的样式和主题

    有的时候我们一个页面要用很多个textview,而且这些textview的样式非常相像,这种情况下我们可以把这些样式抽取出来,然后在每个textview中引用即可,这样修改起来也方便. 我们来看一个简 ...

  9. 如何javascript获取css中的样式

    obj.style.height只能获取行间样式,但是我们要怎么获取写在css文件中的样式呢? 首先我们要用一个新的方法currentStyle.这个方法由current和style两个单词组成意思是 ...

随机推荐

  1. Prometheus部署各服务的Node监控

    1.部署监控主机 部署主机监控,需要安装node_exporter 1.1 下载node exporter wget https://github.com/prometheus/node_export ...

  2. [原创] Agilent 34410A 表与计算机通讯

    1. 接口选择 万用电表出厂时选定为HP-IB接口,应选择为RS-232接口 E:I/O MENU – 2:INTERFACE 选择RS-232 2. 设定波特率 默认9600 E:I/O MENU ...

  3. Android的开机启动流程

    1.Android的开机启动流程 Android的层次框架图,如下所示: 图片清晰地展示了Android的五层架构,从上到下依次是:应用层.应用框架层.库层.运行时层以及Linux内核层.Androi ...

  4. Python time strptime() 函数根据指定的格式把一个时间字符串解析为时间元组

    Python time strptime() 函数根据指定的格式把一个时间字符串解析为时间元组 import time dt=time.strptime('2019-08-08 11:32:23', ...

  5. SpringBoot 基础(二)

    目录 SpringBoot基础(二) 一.操作数据库 1. SpringBootJdbc 2. SpringBoot 整合 Mybatis 3. SpringBott 使用JPA 二.使用 Thyme ...

  6. Direct Buffer介绍

    Direct Buffer 前言 上篇文章Buffer末尾中谈到堆内Buffer(Heap Buffer)和直接Buffer(Direct Buffer)的概念,但是却一笔带过,并未涉及其细节,这篇文 ...

  7. Spring Cloud之Zuul网关路由

    前端请求先通过nginx走到zuul网关服务,zuul负责路由转发.请求过滤等网关接入层的功能,默认和ribbon整合实现了负载均衡 比如说你有20个服务,暴露出去,你的调用方,如果要跟20个服务打交 ...

  8. 命令创建.net core3.0 web应用详解(超详细教程)

    原文:命令创建.net core3.0 web应用详解(超详细教程) 你是不是曾经膜拜那些敲几行代码就可以创建项目的大神,学习了命令创建项目你也可以成为大神,其实命令创建项目很简单. 1.cmd命令行 ...

  9. 用lambda表达式写分组查询的示例

    需要完成的查询逻辑:查询A表中根据CertificateDelayApplyRecordId 分组,每条记录算8个课时,查询出每个CertificateDelayApplyRecordId已经学习了的 ...

  10. 笔记:Java Language Specification - 章节17- 线程和锁

    回答一个问题:多线程场景下,有时一个线程对shared variable的修改可能对另一个线程不可见.那么,何时一个线程对内存的修改才会对另一个线程可见呢? 基本的原则: 如果 读线程 和 写线程 不 ...