1.main()和runApp()
- lib/main.dart—入口文件
void main(){
runApp(MyApp())
}
//简写
void main（）=>runApp(MyApp())
- main 方法是dart的入口方法 runApp方法是flutter的入口方法 MyApp是自定义的一个组件(flutter中所有的组件都是类)
- 在main.dart文件引入的快捷方式输入 fim回车import ‘package:flutter/material.dart’;
- 使用flutter必须引入该文件
- Material是一种移动端和网页端通用的视觉设计语言， Flutter 提供了丰富的 Material 风格的 widgets。
文章图片
- dart中写类的时候 ，可以省略new 关键词
import 'package:flutter/material.dart';
void main(){
runApp(new Center(
child: new Text(
'你好flutter',
textDirection:TextDirection.ltr//文本对齐方式从左向右对齐
)
));
}- runApp方法中传入一个类,mac电脑按住command然后单击类名可以进入到对应类的底层代码
文章图片
可以看到Center类有一个child参数，这个参数代表它的内容
-Text类
文章图片
- flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget - StatelessWidget 是无状态组件,状态不可变的widget
- StatefulWidget 是有状态组件,持有的状态可能在widget生命周期改变
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
@override
// build 返回一个Widget 一个类就是widget
Widget build(BuildContext context) {
return Center(
child:Text(
'你好flutter222',
textDirection:TextDirection.ltr//文本对齐方式从左向右对齐
)
);
}}
5.改变文字颜色
文章图片
文章图片
class MyApp extends StatelessWidget {
@override
// build 返回一个Widget 一个类就是widget
Widget build(BuildContext context) {
return Center(
child:Text(
'你好flutter222',
textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐
style: TextStyle(
fontSize:40.0,//dart中的数组都是double类型,所以必须加.0
color: Colors.red,
// color:Color.fromRGBO(244, 233, 121, 0.5)
),
)
);
}}
6.MaterialApp 和Sacffold
文章图片
- MaterialApp许多 Material Design 的 widget 需要在 MaterialApp 中才能显现正常.一般作为顶层的widget使用
-
MaterialApp:常用属性 home:主页, title:标题 color:颜色, theme:主题， routes:路由
- Scaffold 是 Material Design页面布局的基本实现主要属性有:
- appBar–显示在界面顶部的一个AppBar
- body–当前界面所显示的主要内容
- drawer – 抽屉菜单控件
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
@override
// build 返回一个Widget 一个类就是widget
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Flutter demo'
),
),
body: HomeContent(),
),
// theme: ThemeData(
//primarySwatch:Colors.yellow
// ),
);
}}class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Text(
'你好flutter222',
textDirection:TextDirection.ltr,//文本对齐方式从左向右对齐
style: TextStyle(
fontSize:40.0,//dart中的数组都是double类型,所以必须加.0
color: Colors.red,
// color:Color.fromRGBO(244, 233, 121, 0.5)
),
)
);
}}
7.Container组件
- Container组件是一个容器组件相当于div元素
文章图片
文章图片
官网
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
@override
// build 返回一个Widget 一个类就是widget
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Flutter demo'
),
),
body: HomeContent(),
),
// theme: ThemeData(
//primarySwatch:Colors.yellow
// ),
);
}}class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
child: Text(
'这是一个Container组件'
),
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
// 设置背景色
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width:2.0
)
),
)
);
}}
8.Text组件
文章图片
文章图片
官网
文章图片
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}/*
把flutter内容单独抽离成一个组件
flutter的组件其实就是一个类，这个类需要继承StatelessWidget/StatefulWidget
前期都继承自StatelessWidget
StatelessWidget 是无状态组件,状态不可变的widget
StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变
*/
class MyApp extends StatelessWidget {
@override
// build 返回一个Widget 一个类就是widget
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'Flutter demo'
),
),
body: HomeContent(),
),
// theme: ThemeData(
//primarySwatch:Colors.yellow
// ),
);
}}class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child:Container(
child: Text(
'这是一个Container组件这是一个Container组件这是一个Container组件这是一个Container组件',
textAlign: TextAlign.left,
overflow:TextOverflow.ellipsis,
maxLines: 2,//文本的显示行数
// textScaleFactor: 2,//文本放大的倍数
style: TextStyle(
fontSize: 18.0,//文字的字体大小
fontWeight:FontWeight.bold,//字体是否加粗
),
),
height: 200.0,
width: 200.0,
decoration: BoxDecoration(
// 设置背景色
color: Colors.yellow,
border: Border.all(
color: Colors.blue,
width:2.0
),
borderRadius: BorderRadius.all(//设置圆角
Radius.circular(8),
),
),
// padding: EdgeInsets.all(9.0),//4个方向
padding: EdgeInsets.fromLTRB(20, 10, 10, 10),//4个方向
alignment: Alignment.bottomRight,//配置container组件内部元素的位置)
);
}}
9.Image组件
- Image.asset， 本地图片
- Image.network 远程图片
文章图片
文章图片
官网
文章图片
- 引入外网图片
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'flutter APP'
),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Image.network(
'https://..............',
alignment:Alignment.topLeft,//图片位置对齐方式
// color: Colors.blue,//设置图片的背景色 一般和colorBlendMode配合使用
// colorBlendMode: BlendMode.screen,
// fit:BoxFit.fill ,//全图显示，图片会被拉伸，并充分父容器
// fit:BoxFit.contain ,//全图显示，显示原比例，可能会有空隙
// fit:BoxFit.cover ,//用的多，显示可能拉伸，可能裁切，充满（图片要充满整个容器，还不变形）
repeat: ImageRepeat.noRepeat,//图片是否平铺),
width:300,
height:300,
decoration:BoxDecoration(
color: Colors.blue,
)
),
);
}
}
10.圆角图片
文章图片
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'flutter APP'
),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
width:300,
height:300,
decoration:BoxDecoration(
color: Colors.blue,
// borderRadius: BorderRadius.all(//1.实现圆角
//Radius.circular(150),
// )
borderRadius: BorderRadius.circular(150),//2.也可以实现圆角
image: DecorationImage(
image: NetworkImage('xxxxxxx'),
fit: BoxFit.cover
)
)
),
);
}
}
- ClipOval
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'flutter APP'
),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: ClipOval(//不管是什么样的图片ClipOval都会根据图片大小处理成圆形或者椭圆形图片
child:Image.network(
'https://epdc-yushan.elinkservice.cn/files-pro/20200521/ae8757973df34aca8979d8da6202a073.jpg',
width: 100,
height: 100,
fit: BoxFit.cover,
),
),
),
);
}
}
11.本地图片的引入
文章图片
文章图片
- 配置图片
文章图片
- 引入
import 'package:flutter/material.dart';
void main(){
runApp(MyApp());
}
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text(
'flutter APP'
),
),
body: HomeContent(),
),
);
}
}
class HomeContent extends StatelessWidget{
@override
Widget build(BuildContext context) {
return Center(
child: Container(
child: Image.asset(
'images/ava.png',
//fit: BoxFit.cover,
),
width: 300.0,
height: 300.0,
decoration: BoxDecoration(
border:Border.all(
color: Colors.red,
width: 2.0
)
),
),
);
}
}
推荐阅读
- flutter学习|Dart语言Future、async、await异步（十）
- flutter学习|FLUTTER PUB GET失败（八）
- flutter学习|flutter+Dart 类的继承extends with implements （九）
- flutter|Flutter的button的按钮ElevatedButton
- Android开发|Flutter 2.10 正式发布，包含 Windows 平台正式版，快来看看有什么新内容
- 在 Flutter 中更快地加载图像资源！
- Flutter|用flutter封装一个点击菜单工具栏组件【checkBox多选版】
- flutter学习|flutter+Dart类的创建（六）
- 工具|要一统江湖（Google发布Flutter2）