不知不觉已到了第7篇,然则许多萌新玩家可以照样不知道怎样堆砌控件,像用CSS一样搭出美丽的APP界面,我也一样,红红火火恍恍惚惚,直到本日含泪读完Flutter规划基础,似乎翻开了一个全新的天下。
基础观点
在flutter中,统统皆控件!统统皆控件!统统皆控件!紧紧记着这个观点。Text是控件,Image是控件,Icon是控件,规划脚手架也Scaffold也是控件,以至全部APP也是控件。
用户自定义控件分为有状况控件和无状况控件两种范例,其特征在前面的笔记4中可以感觉感觉。
flutter的内置控件分为两种:
- 可视控件(visible widget)。即我们直接看到的控件,如text、Icon、Button,称号邃晓和html标签雷同。
- 规划控件(layout widget)。可以邃晓为架子,如Row、Column、Container。规划控件不会直接显现内容,可看做承载可视控件的容器。一切的规划控件都有承载子控件的属性:
child
或children
。child
可承载单个子控件,children
可承载多个子控件。每一个规划控件有默许的规划体式格局,使其子控件根据本身的款式安置到位子上。规划控件供应了种种款式的参数,可完成子控件的对齐(align)、缩放(size)、包装(pack)和嵌套(Nest)。简朴总结为:规划控件是为了完成可视控件的种种视觉结果而做的包装,比方前端的html为了完成sticky、双飞翼、圣杯等规划经常内容区外层增加div包裹层。
规划控件也是可以模仿显现的,一般用于调试规划款式时用到的网格线、标尺、动画帧等。启用体式格局:
1.在main.dart中,引入包:
import 'package:flutter/rendering.dart' show debugPaintSizeEnabled;
2.在main
函数中翻开开关:
void main() {
debugPaintSizeEnabled = true; //翻开视觉调试开关
runApp(new MyApp());
}
运转代码后APP结果以下:
flutter的内置控件已定义了许多属性,玩家可以参考Widgets Catalog相识每种控件的细致属性和用法。本篇经由过程几个例子,引见页面上的控件怎样堆砌和规划。
别着急,因为下面的案例中,可以用到图片,先交代一下加载图片的基础设置要领:
- 到项目根目录下建立一个文件夹,定名:images,将图片安排到该文件夹中。
- 翻开根目录下的pubspec.yaml文件,在其下增加解释中的属性:
flutter:
uses-material-design: true
assets: //假如没有这个属性则增加到flutter标签下
- images/lake.jpg //声明图片的途径
- 到代码中,以image控件的体式格局援用图片:
new Image.asset(
'images/lake.jpg', //图片的途径
width: 600.0, //图片控件的宽度
height: 240.0, //图片控件的高度
fit: BoxFit.cover, //通知援用图片的控件,图象应尽可以小,但掩盖全部控件。
),
案例
控件的分列
行(Row)和列(Column),是flutter中最经常运用的两个规划控件,他们只能包容当前屏幕尺寸大小的内容,假如其内部的子控件超越屏幕尺寸,不只不会自动天生滚动条,还会报错。
案例1-行分列
如图上图所示,图中有3个100px宽的图片,经由过程程度均匀距离的体式格局居中横向分列显现到一行中,代码示例:
new Center( //居中控件
child: new Row( //行控件
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //对齐体式格局:均匀距离
children: [
new Image.asset('images/pic1.jpg'), //引入三张图片
new Image.asset('images/pic2.jpg'),
new Image.asset('images/pic3.jpg'),
]
)
)
可以看到上图用到了2个规划控件Center和Row,经由过程Center包裹Row,使行控件坚持居中,而ROW控件包裹了3个图片控件Image,经由过程设置Row的mainAxisAlignment对齐属性,使三个图片空间经由过程均匀距离的体式格局举行横向分列。
完全代码:
Dart code: main.dart
Images: images
Pubspec: pubspec.yaml
案例2-列分列
如上图所示,照样那3张图,经由过程纵向均匀距离的体式格局显现到一列中,代码以下:
new Center(
child: new Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly, //对齐体式格局:均匀距离
children: [
new Image.asset('images/pic1.jpg'),
new Image.asset('images/pic2.jpg'),
new Image.asset('images/pic3.jpg'),
]
)
)
完全代码:
Dart code: main.dart
Images: images
Pubspec: pubspec.yaml
对比案例1和2可以看到,代码构造雷同,Row和Column中都用到了mainAxisAlignment属性,除此以外另有crossAxisAlignment属性。值得注意的是,在Row中mainAxisAlignment控制程度方向对齐,crossAxisAlignment控制垂直方向对齐,而在Column中则恰好相反。相干参数值请参考MainAxisAlignment和CrossAxisAlignment
规划控件的嵌套
案例3-行列嵌套
如上图,我们将图中的元素按图中的框线举行剖析:
1.最外层的运用Row控件包裹,使其内部的两个子控件:浅蓝色框的菜品引见和右侧的菜品大图横向分列,代码以下:
new Scaffold( //脚手架控件
appBar: new AppBar( //工具栏控件
title: new Text(widget.title),
),
body: new Center(
child: new Container( //Container控件用于调解外边距
margin: new EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 30.0),
height: 600.0,
child: new Card( //Card控件控制卡片的视觉结果
child: new Row( //Row控件使其子控件横向分列
crossAxisAlignment: CrossAxisAlignment.start, //纵向对齐体式格局:肇端边对齐
children: [
new Container( //Container控件用于调解宽度
width: 440.0,
child: leftColumn, //左侧的菜品引见控件
),
mainImage, //右侧的大图控件
],
),
),
),
)
)
2.把浅蓝色框内的信息,用Column包裹,使其内容垂直分列:
new Container(
padding: new EdgeInsets.fromLTRB(20.0, 30.0, 20.0, 20.0),
child: new Column( //Column控件,使其子控件垂直分列
children: [
titleText, //题目行,包含了可视Text控件
subTitle, //副题目行,包含了可视Text控件
ratings, //投票信息行
iconList, //小图标行
],
),
);
3.因为titleText和subTitle都是简朴的包装了Text控件,不再贴代码和解释,重点讲下ratings和iconList:
ratings和iconList控件是垂直分列的两行,而各自内部有本身的规划信息,因而将这两行离别拆解为:
ratings下包含了两个程度分列:Row控件用于显现星级,Text控件用于显现用户阅读数,而评分星级控件ROW又剖析为5个程度分列的Icon控件。
iconList横向分列了3个纵向显现的控件,条理一览无余。
对比代码构造:
//ratings控件
new Container(
padding: new EdgeInsets.all(20.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Row(
mainAxisSize: MainAxisSize.min, //mainAxisSize,可压缩或伸长行内控件的间距
children: [
new Icon(Icons.star, color: Colors.black),
new Icon(Icons.star, color: Colors.black),
new Icon(Icons.star, color: Colors.black),
new Icon(Icons.star, color: Colors.black),
new Icon(Icons.star, color: Colors.black),
],
),
new Text(
'170 Reviews',
style: new TextStyle(
color: Colors.black,
fontWeight: FontWeight.w800,
fontFamily: 'Roboto',
letterSpacing: 0.5,
fontSize: 20.0,
),
),
],
),
)
//iconList控件
new Container(
padding: new EdgeInsets.all(20.0),
child: new Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
new Column(
children: [
new Icon(Icons.kitchen, color: Colors.green[500]),
new Text('PREP:'),
new Text('25 min'),
],
),
new Column(
children: [
new Icon(Icons.timer, color: Colors.green[500]),
new Text('COOK:'),
new Text('1 hr'),
],
),
new Column(
children: [
new Icon(Icons.restaurant, color: Colors.green[500]),
new Text('FEEDS:'),
new Text('4-6'),
],
),
],
),
)
Row和Column可以互相包裹,使页面可以完成整齐的规划,只因其特征老是横向或纵向充溢父控件,比方最外层运用时,会自动充溢全屏幕。然则当页面内容须要超越屏幕尺寸时,就用ListTile和ListView替代。
完全代码(因为手机屏幕尺寸没法顺应此案例,运转后长和宽都会报溢出毛病,人人最好运用平板虚拟机测试此案例,或许调解代码中的字体大小和控件尺寸,以满足显现请求):
Dart code: main.dart
Images: images
Pubspec: pubspec.yaml
控件的缩放
案例4-缩放
上图中,三个横向分列的图片控件,中心控件的尺寸比双方的大一倍,代码以下:
new Center(
child: new Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
new Expanded(
child: new Image.asset('images/pic1.jpg'),
),
new Expanded( //运用Expanded控件对Image控件举行包裹
flex: 2, //flex值默许为1,这里改成2以后,其子控件2倍放大
child: new Image.asset('images/pic2.jpg'),
),
new Expanded(
child: new Image.asset('images/pic3.jpg'),
),
))
完全代码:
Dart code: main.dart
Images: images
Pubspec: pubspec.yaml
因为处置惩罚逻辑和规划款式都一同书写到代码中,加上控件的嵌套,flutter的代码会犹如html的标签一样嵌套许多层,对前端开发者可以须要时候顺应,但对我这类新萌来讲降低了从CSS和处置惩罚代码之间往返对比的贫苦,而且flutter的内置控件默许的款式已非常整齐,无需零丁再进修相似前端CSS处置惩罚页面规划的语法和构造,整体来讲降低了不少进修本钱,上手更快更简朴。能在短时候内控制临盆妙技,成就感情不自禁,天然有继承学下去的动力。
以上就是最基础的分列规划引见,置信看到这里的小伙伴已邃晓怎样写APP了,本日就到这里~谢谢人人支撑!
flutter 中文社区(官方QQ群:338252156)