| layout |
title |
permalink |
summary |
keywords |
page |
Flutter for Web开发者 |
/web-analogs/ |
从web开发到Flutter |
从web开发到Flutter |
此页面适用于熟悉HTML和CSS语法的用户。它将HTML / CSS代码片段映射到的Flutter / Dart代码片段。
这些例子假定:
-
HTML文档以HTML DOCTYPE开始, 并且所有HTML的box-sizing为 border-box,
以便与Flutter模型一致.
{% prettify css %}
{
box-sizing: border-box;
}
{% endprettify %}
-
在Flutter中，“Lorem ipsum”文本的默认样式由bold24Roboto变量定义 如下，以保持简单的语法:
{% prettify dart %}
TextStyle bold24Roboto = new TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.w900,
);
{% endprettify %}
以下示例显示如何执行最常见的UI布局任务。
CSS中的字体样式, 大小, 和一些其它文本属性在Flutter中对应了Text
的TextStyle属性。
在 HTML 和 Flutter中, 默认情况下，子元素或widget都固定在左上角
{% prettify css %}
Lorem ipsum
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
[[highlight]] font: 900 24px Georgia;[[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: [[highlight]]new TextStyle(
fontSize: 24.0
fontWeight: FontWeight.w900,
fontFamily: "Georgia",
),[[/highlight]]
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
在Flutter中，您可以在Container的
decoration 属性中设置背景颜色.
下面CSS示例中使用的十六进制颜色值与Flutter Material调色板中所对应的颜色相同：
{% prettify css %}
Lorem ipsum
.greybox {
[[highlight]] background-color: #e0e0e0; [[/highlight]] /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
width: 320.0,
height: 240.0,
[[highlight]] color: Colors.grey[300],[[/highlight]]
);
{% endprettify %}
Center widget
可以使其子widget在水平和垂直方向居中.
为了在CSS中实现类似效果，父元素使用flex或table-cell。此页面上的示例使用了flex布局。
{% prettify css %}
Lorem ipsum
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
[[highlight]] display: flex;
align-items: center;
justify-content: center; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: [[highlight]] new Center(
child: [[/highlight]] new Text(
"Lorem ipsum",
style: bold24Roboto,
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
要指定Container的宽度，请设置其width属性。
这是一个固定的宽度，不像CSS中max-width属性，它可以设置容器宽度最大值。要在Flutter中模拟这种效果，请使用容器的constraints属性。
创建一个新的BoxConstraints来设置minWidth或maxWidth。
对于嵌套容器，如果父级的宽度小于子级宽度，则子级容器将自行调整大小以匹配父级。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
[[highlight]] width: 320px; [[/highlight]]
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] width: 100%;
max-width: 240px; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
[[highlight]] width: 240.0, [[/highlight]]//max-width is 240.0
),
),
[[highlight]] width: 320.0, [[/highlight]]
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
以下示例显示如何在widget的位置、大小和背景上执行更复杂的操作。
默认情况下，widget相对于其父widget定位。
要将widget的绝对位置指定为x-y坐标，请将其嵌套在Positionedwidget中，
该widget又嵌套在Stack widget中。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
[[highlight]] position: relative; [[/highlight]]
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] position: absolute;
top: 24px;
left: 24px; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
[[highlight]] child: new Stack(
children: [
new Positioned( // red box
child: [[/highlight]] new Container(
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
[[highlight]] left: 24.0,
top: 24.0,
),
],
), [[/highlight]]
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
要旋转一个widget，将它嵌套在一个Transform中。
使设置其alignment和origin属性分别以相对和绝对值指定变换原点。
对于简单的2D旋转，widget在Z轴上旋转。（度数×π/ 180）
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] transform: rotate(15deg); [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // gray box
child: new Center(
child: [[highlight]] new Transform(
child: [[/highlight]] new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
[[highlight]] alignment: Alignment.center,
transform: new Matrix4.identity()
..rotateZ(15 * 3.1415927 / 180),
), [[/highlight]]
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
要向上或向下缩放widget，请将其嵌套在Transform中。
并设置其alignment和origin属性分别以相对和绝对值指定变换原点。
对于沿x轴的简单缩放操作，请创建一个新的Matrix4，
标识对象并使用其scale（）方法指定缩放因子。
当缩放父widget时，所有子widget都会相应地缩放。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] transform: scale(1.5); [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // gray box
child: new Center(
child: [[highlight]] new Transform(
child: [[/highlight]] new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
textAlign: TextAlign.center,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
[[highlight]] alignment: Alignment.center,
transform: new Matrix4.identity()
..scale(1.5),
), [[/highlight]]
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
要将线性渐变应用于widget的背景，请将其嵌套到Containerwidget中。
然后使用Container的decoration属性来创建BoxDecoration对象，
并使用BoxDecoration的gradient属性来转换背景填充。
渐变“角度”基于Alignment（x，y）值:
- 如果开始和结束的x值相等，则渐变是垂直的（0°| 180°）。
- 如果开始和结束的y值相等，则渐变为水平（90°| 270°）
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
[[highlight]] background: linear-gradient(180deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
[[highlight]] decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: const Alignment(0.0, -1.0),
end: const Alignment(0.0, 0.6),
colors: [
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
), [[/highlight]]
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 */
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
padding: 16px;
color: #ffffff;
[[highlight]] background: linear-gradient(90deg, #ef5350, rgba(0, 0, 0, 0) 80%); [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
[[highlight]] decoration: new BoxDecoration(
gradient: new LinearGradient(
begin: const Alignment(-1.0, 0.0),
end: const Alignment(0.6, 0.0),
colors: [
const Color(0xffef5350),
const Color(0x00ef5350)
],
),
), [[/highlight]]
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
以下示例显示如何自定义形状。
要给矩形添加圆角请使用BoxDecoration对象的borderRadius属性 。
创建一个新的BorderRadius对象，给该对象指定一个的半径（会四舍五入）。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* gray 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] border-radius: 8px; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red circle
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: new BoxDecoration(
color: Colors.red[400],
[[highlight]] borderRadius: new BorderRadius.all(
const Radius.circular(8.0),
), [[/highlight]]
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
在CSS中，您可以使用box-shadow属性来快速指定阴影偏移和模糊。
在Flutter中，每个属性和值都单独指定。使用BoxDecoration的boxShadow属性创建BoxShadow列表。
您可以定义一个或多个BoxShadow，它们可以叠加出自定义阴影深度、颜色等。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8),
0 6px 20px rgba(0, 0, 0, 0.5);[[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
),
decoration: new BoxDecoration(
color: Colors.red[400],
[[highlight]] boxShadow: [
new BoxShadow (
color: const Color(0xcc000000),
offset: new Offset(0.0, 2.0),
blurRadius: 4.0,
),
new BoxShadow (
color: const Color(0x80000000),
offset: new Offset(0.0, 6.0),
blurRadius: 20.0,
),
], [[/highlight]]
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
decoration: new BoxDecoration(
color: Colors.grey[300],
),
margin: new EdgeInsets.only(bottom: 16.0),
);
{% endprettify %}
在CSS中制作一个圆需要将矩形的四条边的border-radius设置为50%。
虽然BoxDecoration的borderRadius属性支持此方法，
但Flutter为此提供了一个shape属性, 值为BoxShape枚举 。
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* gray 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redcircle {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] text-align: center;
width: 160px;
height: 160px;
border-radius: 50%; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red circle
child: new Text(
"Lorem ipsum",
style: bold24Roboto,
[[highlight]] textAlign: TextAlign.center, [[/highlight]]
),
decoration: new BoxDecoration(
color: Colors.red[400],
[[highlight]] shape: BoxShape.circle, [[/highlight]]
),
padding: new EdgeInsets.all(16.0),
[[highlight]] width: 160.0,
height: 160.0, [[/highlight]]
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
以下示例显示如何指定字体和其他文本属性。他们还展示了如何变换文本字符串，自定义间距和创建摘要。
在CSS中，通过分别给出letter-spacing和word-spacing属性的长度值，指定每个字母或单词之间的空白间距。长度单位可以是px，pt，cm，em等。
在Flutter中，您将空白区域指定为Text的TextStyle的letterSpacing和wordSpacing属性，
值为逻辑像素（允许为负值）
{% prettify css %}
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] letter-spacing: 4px; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum",
style: new TextStyle(
color: Colors.white,
fontSize: 24.0,
fontWeight: FontWeight.w900,
[[highlight]] letterSpacing: 4.0, [[/highlight]]
),
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
在HTML / CSS中，您可以使用text-transform属性执行简单大小写转换
在Flutter中，使用 dart:core库中的String 类的方法来转换Text的内容。
{% prettify css%}
[[highlight]] Lorem ipsum [[/highlight]]
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] text-transform: uppercase; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
[[highlight]] "Lorem ipsum".toUpperCase(), [[/highlight]]
style: bold24Roboto,
),
decoration: new BoxDecoration(
color: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
Text widget控件，可以用相同的格式显示文本。
要显示使用多个样式的文本（在本例中为带有重点的单个单词），请改用RichText。
它的text属性可以指定一个或多个可单独设置样式的TextSpanwidget。
在以下示例中，“Lorem”位于具有默认（继承）文本样式的TextSpan小部件中，“ipsum”位于具有自定义样式的单独TextSpan中。
{% prettify css %}
[[highlight]] Lorem ipsum [[/highlight]]
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
[[highlight]] font: 900 24px Roboto; [[/highlight]]
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
}
[[highlight]] .redbox em {
font: 300 48px Roboto;
font-style: italic;
} [[/highlight]]
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: [[highlight]] new RichText(
text: new TextSpan(
style: bold24Roboto,
children: [
new TextSpan(text: "Lorem "),
new TextSpan(
text: "ipsum",
style: new TextStyle(
fontWeight: FontWeight.w300,
fontStyle: FontStyle.italic,
fontSize: 48.0,
),
),
],
),
), [[/highlight]]
decoration: new BoxDecoration(
backgroundColor: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}
摘录显示段落中文本的最初行，并且通常使用省略号处理溢出文本。在HTML / CSS中，摘要不能超过一行。截断多行需要一些JavaScript代码。
在Flutter中，使用Text小部件的maxLines属性来指定要包含在摘要中的行数，以及用于处理溢出文本的属性overflow。
{% prettify css %}
Lorem ipsum dolor sit amet, consec etur
.greybox {
background-color: #e0e0e0; /* grey 300 /
width: 320px;
height: 240px;
font: 900 24px Roboto;
display: flex;
align-items: center;
justify-content: center;
}
.redbox {
background-color: #ef5350; / red 400 */
padding: 16px;
color: #ffffff;
[[highlight]] overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; [[/highlight]]
}
{% endprettify %}
{% prettify dart %}
var container = new Container( // grey box
child: new Center(
child: new Container( // red box
child: new Text(
"Lorem ipsum dolor sit amet, consec etur",
style: bold24Roboto,
[[highlight]] overflow: TextOverflow.ellipsis,
maxLines: 1, [[/highlight]]
),
decoration: new BoxDecoration(
backgroundColor: Colors.red[400],
),
padding: new EdgeInsets.all(16.0),
),
),
width: 320.0,
height: 240.0,
color: Colors.grey[300],
);
{% endprettify %}