flutter_01
一、环境搭建
1) 配置系统环境变量
不配置的话，我们下载sdk得翻墙，要不然网速慢的不要不要的。
image.png
2)下载flutter Sdk
解压到d盘
3) 配置环境FLUTTER_HOME变量
可以不配置，不配置的话，as创建flutter工程的时候，会再次提示你，需要下载flutter<br />
image.png
image.png
这里是添加不是覆盖，需要注意
4) 测试flutter环境
flutter doctor
flutter doctor --android-licenses 证书缺少时运行
image.png
关于as版本，只要有一行正常即可，上图上，我们会有不同的版本
二、 知识点
1) 无状态(statelessWidget)&有状态(stateFulWidget)
无: 创建和初始化后，不能再修改它们的内容<br />有:状态是可变的
2) java&dart 方法重载
1. java
public void getName(){}
public void getName(int a){}
public void getName(float b){}
public void getName(int a,float b){}
2.dart
public void getName({int a,float b});
三、flutter示例
1) 基础示例
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Wlecome to flutter",
home: new Scaffold(
appBar: new AppBar( // 创建标题栏
title: new Text("Hello Flutter"),
),
body: new Center( // 创建中心显示的文本控件
child: new Text("this is first flutter app , good luck2 ! "),
),
),
);
}
}
2) 文字随机生成并显示
1) english_words 版本获取
2) 版本依赖与get
1. pubspec.yaml添加
dependencies:
english_words: ^3.1.5
2. 点击下图中的get即获取包
image.png
3) main.dart中代码修改
import 'package:english_words/english_words.dart'; // 1. 导入english_word包
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
WordPair wordPair = new WordPair.random(); // 声明引用
return new MaterialApp(
title: "Wlecome to flutter",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
// 调用引用，生成字符串
child: new Text(wordPair.asLowerCase),
),
),
);
}
}
ctrl+s 热重载
3) 使用有状态的widget对代码进行重构
1. 定义有状态的widget
class RandwordsWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
// TODO: implement createState
return new RandwordsState();
}
}
2. 定义状态
class RandwordsState extends State<RandwordsWidget> {
@override
Widget build(BuildContext context) {
WordPair wordPair = new WordPair.random();
return new Text(wordPair.asLowerCase);
}
}
3. 原代码修改
import 'package:english_words/english_words.dart'; // 1. 导入english_word包
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Wlecome to flutter",
home: new Scaffold(
appBar: new AppBar(
title: new Text("Hello Flutter"),
),
body: new Center(
// 使用有状态的控件，因为这里的原生控件定义之后状态是不能修改的
child: new RandwordsWidget(),
),
),
);
}
}
4) listview的使用
滚动到底端自动加载更多
1. 数据集合定义和样式定义
// 定义数组: dart中没有List
var suggestions = <WordPair>[];
// 定义字体样式
var fontStyle = const TextStyle(fontSize: 18.0);
2. listview及itemview构建
/*构建listview*/
Widget buildListView() {
return new ListView.builder(
// 设置边距
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, index) {
// 如果index是基数
if (index.isOdd) {
// 定义一个分割线
return new Divider();
}
// 向下取取整: 5/2=2.5 取2
int newIndex = index ~/ 2;
if (newIndex >= suggestions.length) {
// 如果条目大于等于了数组的长度再放10条进行，这样就实现了滚动到底部自动加载更多
suggestions.addAll(generateWordPairs().take(10));
}
// 这里使用的是新的索引不是原来的哦
return buildItemView(suggestions[newIndex]);
});
}
/*构建listview中的itemView*/
Widget buildItemView(WordPair wordPair) {
return new ListTile(
title: new Text(wordPair.asLowerCase, style: fontStyle));
}
3. 项目完整代码
class RomdomWordsWidget extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return new RomdomWordsState();
}
}
class RomdomWordsState extends State<RomdomWordsWidget> {
// 定义数组: dart中没有List
var suggestions = <WordPair>[];
// 定义字体样式
var fontStyle = const TextStyle(fontSize: 18.0);
/*构建listview*/
Widget buildListView() {
return new ListView.builder(
// 设置边距
padding: const EdgeInsets.all(16.0),
itemBuilder: (context, index) {
// 如果index是基数
if (index.isOdd) {
// 定义一个分割线
return new Divider();
}
// 向下取取整: 5/2=2.5 取2
int newIndex = index ~/ 2;
if (newIndex >= suggestions.length) {
// 如果条目大于等于了数组的长度再放10条进行，这样就实现了滚动到底部自动加载更多
suggestions.addAll(generateWordPairs().take(10));
}
// 这里使用的是新的索引不是原来的哦
return buildItemView(suggestions[newIndex]);
});
}
/*构建listview中的itemView*/
Widget buildItemView(WordPair wordPair) {
return new ListTile(
title: new Text(wordPair.asLowerCase, style: fontStyle));
}
@override
Widget build(BuildContext context) {
// Scaffold移到这里了，App中的可是会跟着变化哦.
return new Scaffold(
appBar: AppBar(
title: Text("列表展示"),
),
body: buildListView());
}
}
4. app代码
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: "Wlecome to flutter", home: new RomdomWordsWidget());
}
}
5. 效果:
image.png
网友评论