面向Web开发者的Flutter

谋爱先谋生爱人先爱己
358 阅读6分钟

面向Web开发人员的Flutter

此博客适用于熟悉用于排列应用程序UI组件的HTML和CSS语法的用户。它将HTML/CSS代码片段映射到对应的Flutter/Dart代码。

Flutter是一个使用Dart编程语言构建跨平台应用程序框架。要了解使用Dart编程和使用JavaScript编程之间的一些区别，请参阅作为 JavaScript 开发人员学习 Dart。

设计Web布局和Flutter布局之间的根本区别之一是了解约束的工作原理，以及小部件的大小和位置。要了解更多信息，请参阅了解约束。

示例

  • HTML文档以开头<!DOCTYPE html>，所有HTML元素的CSS盒模型设置为border-box,与Flutter模型保持一致
{
    box-sizing: border-box;
}
  • 在Flutter中，"Lorem ipsum"文本的默认样式由bold24Roboto变量定义如下，以保持语法简单：
TextStyle bold24Roboto = const TextStyle(
    color: Colors.white,
    fontSize: 24,
    fontWeight: FontWeight.bold,
);

一、执行基本布局操作哦

以下示例中展示了如何执行最常见的UI布局任务。

1.1、样式化和对其文本

CSS使用字体和颜色属性处理的字体样式、大小和其他文本属性的小部件TextStyle子项的单独属性.

对于用于text-align的CSS中的文本对齐属性，有一个Text小部件的textAlign属性。

在HTML和Flutter中，子元素或小部件默认锚定在左上角。

image.png

image.png

1.2、设置背景颜色

在Flutter中，您可以使用Container的color属性或decoration属性来设置背景颜色。但是，您不能同时提供两者，因为这可能会导致装饰图覆盖背景色。当背景色手势简单的颜色时，应优先使用color属性。对于其他情况，例如渐变或图像，请使用decoration属性。

CSS示例使用与Material调色板等价的十六进制颜色。

image.png

image.png

image.png

1.3、居中组件

Center小部件使它的子部件水平和垂直居中。

为了在CSS中实现类似的效果，父元素使用flex或table-cell显示行为。下面示例显示了flex行为。

image.png

image.png

1.4、设置容器宽度

要指定Container小部件的宽度，请使用其width属性。这是一个固定的宽度，不像CSS max-width属性将容器宽度调整到最大值。要在Flutter中模拟这种效果，请使用Container的constraints属性。使用minWidth或maxWidth创建一个新的BoxContraonts小部件。

对于嵌套容器，如果父容器的宽度小于子容器宽度，则子容器调整自身大小哦以匹配父容器。

image.png

image.png

二、操纵位置和大小

以下示例展示了如何对小部件位置、大小和背景执行更复杂的操作。

2.1、设置绝对位置

默认情况下，小部件相对于其父级定位。

要将小部件的绝对位置指定为xy坐标，请将其嵌套在Positioned部件中，而它又嵌套在Stack小部件中。

image.png

image.png

2.2、旋转部件

要旋转小部件，请将其嵌套在Transform小部件。使用Transform小哦部件的alignment和origin属性分别以相对和绝对指定变换原点。

对于简单的2D旋转，其中小部件在Z轴上旋转，创建一个新的Matrix4标识对象使其rotateZ()方法使用弧度（degreess x π / 18）制定旋转因子。

image.png

image.png

2.3、缩放部件

要放大或缩小小部件，请将其嵌套在Transform小部件中。使用Transform小部件的alignment和align属性分别指定变换原点。

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

当您缩放父控件时，其子控件会相应缩放。

image.png

image.png

2.4、应用线性渐变

要将线性渐变应用于小部件的背景，请将其嵌套在Container小部件中。然后使用Container小部件的decoration属性创建一个BoxDecoration对象，并使用BoxDecoration的渐变属性来变换背景填充。

渐变“角度”基于Alignment(x, y)值：

  • 如果开始和结束x值相等，则渐变是垂直的(0° | 180°)
  • 如果开始和结束y值相等，则渐变时候水平(90° | 270°)

2.4.1、垂直渐变

image.png

image.png

2.4.2、水平渐变

image.png

image.png

三、操纵形状

以下示例展示了如何制作和自定义形状。

3.1、圆角

要使用矩形的角变圆，请使用BoxDecoration对象的borderRadius属性。创建一个新的BorderRadius对象，指定圆角的半径。

image.png

image.png

3.2、添加框阴影

在CSS中，您可以随时使用box_shadow属性以简写方式指定阴影偏移和模糊。此示例显示两个框阴影，具有以下属性。

  • xOffset: 0px, yOffset: 2px, blur: 4px, color: black @80% alpha
  • xOffset: 0px, yOffset: 06x, blur: 20px, color: black @50% alpha

在Flutter中，每个属性和值都是单独指定的。使用BoxDecoratioon的boxShadow属性创建BoxShadow小部件列表。您可以定义一个或多个BoxShadow小部件，这些小部件可以堆叠以自定义阴影深度、颜色等。

image.png

image.png

3.3、制作圆形和椭圆形

在CSS中制作一个园需要一种变通方法，即在矩形的所有四个遍应用50%的边界半径，尽管有基本的形状。

虽然BoxDecoration的borderRadius属性支持这种方式，但Flutter为此目的提供了带有BoxShape枚举的形状属性。

image.png

image.png

四、操纵文本

以下示例显示如何指定字体和其他文本属性。它们还展示了如何转换文本字符串、自定义间距和创建摘录。

4.1、调整文字间距

在CSS中，您可以通过分别的letter-spacing和word-spacing属性指定长度来指定每个字母或单词之间的空白量。空格的大小可以是px、pt、cm、em等。

在Flutter中，您可以为Text小部件的TextStyle子项的letterSpacing和wordSpacing属性指定指定空白作为逻辑像素（允许负值）。 image.png

image.png

4.2、进行内联格式更改

Text小部件可让您显示具有某些格式特征的文本。要显示使用多种样式的文本，请该用RichText小部件。它的文本属性可以指定一个或多个可以单独设置样式的TextSpan对象。

在以下示例中，"Lorem"位于具有默认文本样式的TextSpan中，而“ipsum”位于具有自定义样式的单独TextSpan中。 image.png

image.png

4.3、创建文本摘录

摘录显示段落文本的初始行，并处理溢出的文本，通常使用省略号。

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

image.png

image.png

avatar
文章
阅读
粉丝