flutter 中的样式

  • 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。

posted on 2019-05-23 19:45  cag2050  阅读(527)  评论(0)  编辑  收藏  举报

导航