• 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. Windows Server实例防火墙策略的配置方法

    概述 本文介绍在Windows Server实例中,如何配置防火墙策略的方法. 详细描述 配置Windows Server版本的防火墙功能方法,参考如下步骤. 提示:此处以Windows Server ...

  2. 使用 Jest 和 Supertest 进行接口端点测试

    如何创建测试是一件困难的事.网络上有许多关于测试的文章,却从来不告诉你他们是如何开始创建测试的. 所以,今天我将分享我在实际工作中是如何从头开始创建测试的.希望能够对你提供一些灵感. 目录: 使用 E ...

  3. ES6中的关键字 - const

    const 关键字 1.声明后的值不可以修改: const name = "小康哥"; name = "小康"; // 报错,const为constant的缩写 ...

  4. SQLServer字符串与数字拼接

    1.使用cast‘’+cast(@ID as varchar) 2.使用LTrim‘’+LTrim(@ID) 感觉第二种方式代码简单,但是可读性不好.

  5. ELK学习笔记之Kibana权限控制和集群监控

    详细请参考如下四篇博客,注意ELK6中移除了Xpack的默认账户和密码,需要手动设置 Kibana安全特性之权限控制 ELK 集群 Kibana 使用 X-Pack 权限控制,监控集群状态,警报,监视 ...

  6. php 逻辑题

    越长大约发现,高中学的数学,都还给了数学老师,一点都没有留住. 最近遇到了一个 逻辑题,然后想了半天,后来做出来了,我就发现了,我可能是一个假的理科生.很简单的样子. 废话不说,看看这道题吧. /** ...

  7. Introducing KSQL: Streaming SQL for Apache Kafka

    Update: KSQL is now available as a component of the Confluent Platform. I’m really excited to announ ...

  8. Oracle For Linux 恢复日记 霆智X8III

    公司最近的客户需要在LINUX系统中做数据迁移,备份出来的内容数据库物理文件,回档日志和SpfileXXXX 客户用的是北京霆智的X8备份阵列,X8与数据库服务器都放在IDC机所,IDC机房与客户之间 ...

  9. asp.net core 系列之Reponse caching 之 Response Caching Middleware(4)

    这篇文章介绍 Response Caching Middleware . Response Caching Middleware in ASP.NET Core 通过在ASP.NET Core应用中 ...

  10. MySQL之简介以及数据类型(一)

    一:关系型数据库 所谓的关系型数据库RDBMS,是建立在关系模型基础上的数据库,借助于集合代数等数学概念和方法来处理数据库中的数据. 二:关系型数据库的主要产品: oracle:在以前的大型项目中使用 ...