【LSP】入坑Flutter,弃坑React-Native

好稀友✨   ·   发表于 3个月前   ·   编程代码
前言
由于业务需要之前用react-native重写了公司项目,中间碰到各种坑,莫名其妙红屏,适配坑,页面刷新坑,打包坑,热更新坑.折磨了两个月终于完成.年初就听说了Flutter,看一下是用Google的Dart语言,据说是有望代替JavaScript这个一周完成的奇葩.咳咳,看了下国内咸鱼团队已经在项目中使用了Flutter技术,这是他们的社区社区博文深入理解flutter的编译原理与优化,想不到竟然如此强大.忍不住就参考官方文档写了个demo

克隆Flutter仓库git clone -b beta https://github.com/flutter/flutter.git
配置环境变量
export PUB_HOSTED_URL=https://pub.flutter-io.cn //国内用户需要设置
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn //国内用户需要设置
export PATH= flutter所在目录/flutter/bin:$PATH
可直接将环境变量写入~/.bash_profile文件中执行source $HOME/.bash_profile生效(如果未生效请重启终端或电脑)

配置命令行工具sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

安装链接设备工具
brew update
brew install --HEAD libimobiledevice
brew install ideviceinstaller ios-deploy cocoapods
pod setup
VScode 配置
搜索dart code安装dart 插件

快捷键 shift + command + p 输入 ‘doctor’, 然后选择 ‘Flutter: Run Flutter Doctor’ 验证操作

同样 shift + command + p 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action 创建一个测试项目 vscode 底部展示附加设备

点击Debug>Start Debugging即可运行项目

下面开始楼层更新[狂笑][狂笑]
20 Reply   |  Until 2个月前 | 3151 View

admin
发表于 3个月前

创建
按照之前的方法创建一个模板 shift + command + p 输入 ‘flutter’, 然后选择 ‘Flutter: New Project’ action

替换 lib/main.dart. 删除lib / main.dart中的所有代码,然后替换为下面的代码,它将在屏幕的中心显示“Hello World”

评论列表

  • 加载数据中...

编写评论内容

kukugou
发表于 3个月前

//应用入口
//main函数使用了(=>)符号, 这是Dart中单行函数或方法的简写
void main() => runApp(new DemoApp());

class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text('Royce and Owen'),
),
),

);
}
}

评论列表

  • 加载数据中...

编写评论内容

xiaoxiao
发表于 3个月前

外部包使用
您可以 在pub.dartlang.org上找到english_words软件包以及其他许多开源软件包
将english_words添加到pubspec.yaml文件中(pubspec文件
管理Flutter应用程序的assets(资源,如图片、package等))
在终端中运行flutter packages get安装依赖

评论列表

  • 加载数据中...

编写评论内容

1789137592
发表于 3个月前

flutter packages get
Running "flutter packages get" in startup_first... 0.6s
导入import 'package:english_words/english_words.dart';
使用 English words 包生成文本来替换字符串“Hello World”.

评论列表

  • 加载数据中...

编写评论内容

yyl941
发表于 3个月前

修改代码
class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new Text(wordPair.asUpperCase),
),
),

);
}
}

评论列表

  • 加载数据中...

编写评论内容

wa684572
发表于 3个月前

添加一个 有状态的部件(Stateful widget)
Stateless widgets 是不可变的, 这意味着它们的属性不能改变 - 所有的值都是最终的.

评论列表

  • 加载数据中...

编写评论内容

qingjiu
发表于 3个月前

Stateful widgets 持有的状态可能在widget生命周期中发生变化. 实现一个 stateful widget 至少需要两个类:

一个 StatefulWidget类。
一个 State类。 StatefulWidget类本身是不变的,但是 State类在widget生命周期中始终存在.

评论列表

  • 加载数据中...

编写评论内容

kukugou
发表于 3个月前

新建一个组件类RandomWords
新建一个State组件类RandomWordsState
class RandomWordsState extends State {
@override
Widget build(BuildContext context) {
final wordPair = new WordPair.random();
return new Text(wordPair.asPascalCase);
}
}
class RandomWords extends StatefulWidget {
@override
State createState() {
// TODO: implement createState
return new RandomWordsState();
}
}

评论列表

  • 加载数据中...

编写评论内容

1769176
发表于 3个月前

修改代码 final wordPair = new WordPair.random(); // 删除此行

class DemoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {

return new MaterialApp(
title: 'Welcome to Flutter',
home: new Scaffold(
appBar: new AppBar(
title: new Text('Welcome to Flutter'),
),
body: new Center(
child: new RandomWords(),
),
),

);
}
}

评论列表

  • 加载数据中...

编写评论内容

lcr
发表于 3个月前

创建一个无限滚动ListView
扩展(继承)RandomWordsState类,以生成并显示单词对列表。 当用户滚动时,ListView中显示的列表将无限增长

评论列表

  • 加载数据中...

编写评论内容
LoginCan Publish Content