前言
1、Flutter是Google使用Dart语言开发的移动应用开发框架，使用一套Dart代码就能构建高性能、高保真的iOS和Android应用程序，并且在排版、图标、滚动、点击等方面降低差异。
2、Flutter不是黑科技，应用程序的代码总是以一种非常合理，可以解释的方式的运行着，只是需要去了解而已。Flutter能够在iOS和Android上运行起来，依靠的是一个叫Flutter Engine的虚拟机，Flutter Engine是Flutter应用程序的运行环境，开发人员可以通过Flutter框架和API在内部进行交互
3、Flutter的优势（1）高效率 用一套代码库就能开发iOS和Android应用;使用新型的、表现力强的语言和声明式的方法，用更少的代码来做更多的事情;开发调试更容易方便 ,可以在应用程序运行时更改代码并重新加载查看效果，也就是热重新加载
（2）创建美观、高度定制的用户体验 ,Flutter框架内置了一组丰富的质感设计控件
内容
一、全世界的第一个简单的输出小李子：
import 'package:flutter/material.dart';
void main() {
runApp(new Center(child: new Text('你好，灵机！', textDirection: TextDirection.ltr)));
}
二、基础控件：
<一>、简单控件：
- Text控件即容器，是一个常用的控件，下面的实例有7个不同样式的文本控件
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('文本控件'),
),
body: new Column(
children: <Widget>[
new Text(
'红色+黑色删除线+25号',
style: new TextStyle(
color: const Color(0xffff0000),
decoration: TextDecoration.lineThrough,
decorationColor: const Color(0xff000000),
fontSize: 25.0,
),
),
new Text(
'橙色+下划线+24号',
style: new TextStyle(
color: const Color(0xffff9900),
decoration: TextDecoration.underline,
fontSize: 24.0,
),
),
new Text(
'虚线上划线+23号+倾斜',
style: new TextStyle(
decoration: TextDecoration.overline,
decorationStyle: TextDecorationStyle.dashed,
fontSize: 23.0,
fontStyle: FontStyle.italic,
),
),
new Text(
'serif字体+24号',
style: new TextStyle(
fontFamily: 'serif',
fontSize: 26.0,
),
),
new Text(
'monospace字体+24号+加粗',
style: new TextStyle(
fontFamily: 'monospace',
fontSize: 24.0,
fontWeight: FontWeight.bold,
),
),
new Text(
'天蓝色+25号+2行跨度',
style: new TextStyle(
color: const Color(0xff4a86e8),
fontSize: 25.0,
height: 2.0,
),
),
new Text(
'24号+2个字母间隔',
style: new TextStyle(
fontSize: 24.0,
letterSpacing: 2.0,
),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ContainerDemo(),
),
);
}
- Image控件即图片控件，是显示图像的控件，Image控件有多种构造函数：
(1) new Image，用于从ImageProvider获取图像。
(2) new Image.asset，用于使用key从AssetBundle获取图像。
(3) new Image.network，用于从URL地址获取图像。
(4) new Image.file，用于从File获取图像。
下面是一个从URL地址获取图像的实例，并通过scale属性设置缩放比例：
import 'package:flutter/material.dart';
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('从URL地址获取图像'),
),
body: new Center(
child: new Image.network(
'http://pic.baike.soso.com/p/20130828/20130828161137-1346445960.jpg',
scale: 2.0,
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ImageDemo(),
),
);
}
下面是一个从本地文件目录中获取图像的实例：
class ImageDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('从本地获取图像'),
),
body: new Center(
child: new Container(
decoration: new BoxDecoration(
backgroundImage: new BackgroundImage(
image: new AssetImage('images/flutter.jpeg'),
),
)
)
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ImageDemo(),
),
);
}
<二>内容布局：
1.水平布局
Row控件即水平布局控件，能够将子控件水平排列
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('水平方向布局'),
),
body: new Row(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('点击红色按钮事件');
},
color: const Color(0xffcc0000),
child: new Text('红色按钮'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('点击黄色按钮事件');
},
color: const Color(0xfff1c232),
child: new Text('黄色按钮'),
),
),
new RaisedButton(
onPressed: () {
print('点击粉色按钮事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按钮'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
2.垂直布局
Column控件即垂直布局控件，能够将子控件垂直排列
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('垂直方向布局'),
),
body: new Column(
children: <Widget>[
new RaisedButton(
onPressed: () {
print('点击红色按钮事件');
},
color: const Color(0xffcc0000),
child: new Text('红色按钮'),
),
new Flexible(
flex: 1,
child: new RaisedButton(
onPressed: () {
print('点击黄色按钮事件');
},
color: const Color(0xfff1c232),
child: new Text('黄色按钮'),
),
),
new RaisedButton(
onPressed: () {
print('点击粉色按钮事件');
},
color: const Color(0xffea9999),
child: new Text('粉色按钮'),
),
]
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
3.Stack即层叠布局控件，能够将子控件层叠排列
Stack控件的每一个子控件都是定位或不定位，定位的子控件是被Positioned控件包裹的。Stack控件本身包含所有不定位的子控件，其根据alignment定位（默认为左上角）。然后根据定位的子控件的top、right、bottom和left属性将它们放置在Stack控件上。
import 'package:flutter/material.dart';
class LayoutDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('层叠定位布局'),
),
body:new Center(
child: new Stack(
children: <Widget>[
new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
new Positioned(
left: 35.0,
right: 35.0,
top: 45.0,
child: new Text(
'Whatever is worth doing is worth doing well. ๑•ิ.•ั๑',
style: new TextStyle(
fontSize: 20.0,
fontFamily: 'serif',
),
),
),
]
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new LayoutDemo(),
),
);
}
4.Container控件即容器，是一个常用的控件，基础容器的实例
import 'package:flutter/material.dart';
class ContainerDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Container(
width: 128.0,
height: 128.0,
decoration: new BoxDecoration(
color: Colors.lightBlueAccent[100],
),
),
);
}
}
void main() {
runApp(
new MaterialApp(
title: 'Flutter教程',
home: new ContainerDemo(),
),
);
}
网友评论