flutter 1
-
flutter module 用于混合开发
-
flutter package 只有dart 类似于开发三方框架 如：Alamofire
-
flutter plugin 带有ios 和 android 原生代码 的插件
-
flutter APP APP开发使用
理解：为什么dart能运行 iOS & android
-
RN 在原生的UI基础上进行的包装，存在性能问题,对原生的依赖度极强，不好维护
-
flutter 基于
渲染引擎，把渲染引擎安装在手机上,渲染引擎负责解析dart代码,然后渲染界面 -
优点:效率高，不依赖原生的UI，可以使ios 和 android 界面高度统一,因为都是同一套渲染引擎
- flutter 有热重载的功能
- 渲染引擎有两个：一个包含ios原生的渲染引擎，一个包含android原生的渲染引擎
- flutter 支持 ios,android,Linux,MacOs,Windows
A new Flutter project.
## Getting Started
This project is a starting point for a Flutter application.
A few resources to get you started if this is your first Flutter project:
- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab)
- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook)
For help getting started with Flutter development, view the
[online documentation](https://docs.flutter.dev/), which offers tutorials,
samples, guidance on mobile development, and a full API reference.
- android studio 有一bug，当启动强制退出之后，会锁住当前的运行环境，再次启动时没办法运行，这是为了保护数据将当前的运行环境数据保留到了flutter/bin/cache/lockfile,
解决
终端输入 which flutter
打印 /Users/hong/flutter/bin/flutter
终端输入 cd /Users/hong/flutter/bin
终端输入 ls
打印 cache dart dart.bat flutter flutter.bat internal
终端输入 open ./cache 接下来会打开cache文件,找到`lockfile`将这个文件删除即可
开始代码
-
首先导入 import 'material.dart' 相当于 iOS UIKit
-
Widget 相当于 UIView，flutter视图层面上万物皆是widget
-
核心渲染能力：增量渲染,谁改变只渲染谁，因其有一个渲染树的概念，不变的不会再次渲染
-
flutter仅有一层视图
widget 分两大类
- 1.无状态 stateless
StatelessWidget - 2.有状态 stateful
StatefulWidget
comand 加 +号 或 -号 折叠
option 加 回车 创建build 返回一个widget
自定义Widget
- 1.重写父类构造
const MyApplication({Key? key}) : super(key: key);
- 2.实现StatelessWidget方法 可见是abstract 抽象类
@override Widget build(BuildContext context) {
// TODO: implement build
return const Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
),
);
}
文字样式
- 注意： Text的属性
全部是final修饰，这就是意味着只能替换控件，而不能修改控件 - 理解：界面对象不可变只能换 模型对象可变
常规
const Text(
String this.data, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
}) : assert(
data != null,
'A non-null String must be provided to a Text widget.',
),
textSpan = null,
super(key: key);
富文本
const Text.rich(
InlineSpan this.textSpan, {
Key? key,
this.style,
this.strutStyle,
this.textAlign,
this.textDirection,
this.locale,
this.softWrap,
this.overflow,
this.textScaleFactor,
this.maxLines,
this.semanticsLabel,
this.textWidthBasis,
this.textHeightBehavior,
}) : assert(
textSpan != null,
'A non-null TextSpan must be provided to a Text.rich widget.',
),
data = null,
super(key: key);
- 示例代码
void main() => runApp(const MyApplication());
class MyApplication extends StatelessWidget{
const MyApplication({Key? key}) : super(key: key);
@override Widget build(BuildContext context) {
// TODO: implement build
return const Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.tealAccent,
),
),
);
}
}
效果图：
Material 继承自 StatefulWidget
案例1 MaterialApp
void main() => runApp(const RocApplication1());
class RocApplication1 extends StatelessWidget {
const RocApplication1({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return const MaterialApp(
home: MyApplication1(),
);
}
}
class MyApplication1 extends StatelessWidget{
const MyApplication1({Key? key}) : super(key: key);
@override Widget build(BuildContext context) {
// TODO: implement build
return const Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.tealAccent,
),
),
);
}
}
- home:Scaffold()
- appBar:AppBar() 导航栏
- title:Text()
- appBar:AppBar() 导航栏
案例2 Scaffold & AppBar
void main() => runApp(const RocApplication2());
class RocApplication2 extends StatelessWidget {
const RocApplication2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('hello flutter'),
),
),
);
}
}
案例3 Scaffold & AppBar & body
void main() => runApp(const RocApplication2());
class RocApplication2 extends StatelessWidget {
const RocApplication2({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text('hello flutter'),
),
body: const MyWidget1(),
),
);
}
}
class MyWidget1 extends StatelessWidget{
const MyWidget1({Key? key}) : super(key: key);
@override Widget build(BuildContext context) {
// TODO: implement build
return const Center(
child: Text(
'hello flutter',
textDirection: TextDirection.ltr,
style: TextStyle(
fontSize: 40.0,
fontWeight: FontWeight.bold,
color: Colors.black,
),
),
);
}
}
ListView
- lib 创建一个文件夹 rc_model, 创建一个dart文件f_class_model
// model
class FClass{
final String? name;
final String? imageUrl;
const FClass({this.name,this.imageUrl});
}
- 创建一个数组列表
final List<FClass> datas = [..........];
- 使用
void main() => runApp(const RocApplication3());
class RocApplication3 extends StatelessWidget {
const RocApplication3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return const MaterialApp(
home: Home(),
);
}
}
class Home extends StatelessWidget {
const Home({Key? key}) : super(key: key);
// 重点部分
Widget _itemBuilder(BuildContext context, int index) => Text(datas[index].name!);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
appBar: AppBar(
title: const Text('hello flutter'),
),
body: ListView.builder(itemBuilder: _itemBuilder,itemCount: datas.length)
);
}
}
-
Container
-
child 小部件的排列只有三种：横,竖，叠
-
竖 Column
-
横 Row
-
叠 Clip
/// * [Row], for a version of this widget that is always horizontal.
/// * [Column], for a version of this widget that is always vertical.
/// * [Expanded], to indicate children that should take all the remaining room.
/// * [Flexible], to indicate children that should share the remaining room.
/// * [Spacer], a widget that takes up space proportional to its flex value.
案例4
void main() => runApp(const RocApplication3());
class RocApplication3 extends StatelessWidget {
const RocApplication3({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
// TODO: implement build
return const MaterialApp(
home: Home2(),
);
}
}
class Home2 extends StatelessWidget {
const Home2({Key? key}) : super(key: key);
Widget _itemBuilder(BuildContext context, int index) => customContainer(index);
@override
Widget build(BuildContext context) {
// TODO: implement build
return Scaffold(
backgroundColor: Colors.amberAccent,
appBar: AppBar(
title: const Text('hello flutter'),
),
body: ListView.builder(itemBuilder: _itemBuilder,itemCount: datas.length)
);
}
}
Container customContainer(a){
return Container(
color: Colors.white,
margin: const EdgeInsets.all(5),
child: Column(
children: <Widget>[
Image.network(datas[a].imageUrl!),
const SizedBox(height: 10,),
Text(datas[a].name!)
],
)
);
}
网友评论