1. Flutter 環境搭建
混合App開發技術：
1. 通過WebView包裹，就是網頁在APP中，技術phonegap、
2. ReactNative、Weex: 使用js封裝原生anroid、ios控件
3. flutter: 原生
Flutter 配置上手：
1. Flutter Sdk 配置
Flutter Sdk:
下載路徑： https://blog.csdn.net/Jiang_Rong_Tao/article/details/104615339
flutter doctor： 查看flutter環境是否有問題
skd路徑: /Users/denganzhi/Library/Android/sdk
open .bash_profile
export PATH=$PATH:/Users/denganzhi/flutter_install/flutter/bin
配置環境變量：
source .bash_profile
flutter --help
flutter doctor : 有問題都會提示
flutter doctor --android-licenses ： 根據提示安裝licenses即可
2. android studio 安裝flutter插件：在啓動的時候選擇安裝
vscode 使用
Fullter[自動安裝dart插件] 插件
Awesome Flutter Snippets : vscode插件,
==================================================================
3. 國內鏡像配置: 新建項目的時候卡頓無法下載可以配置如下
3.1.flutter/packages/flutter_tools/gradle/flutter.gradle
buildscript {
repositories {
// google()
// jcenter()
maven{
url 'https://maven.aliyun.com/repository/jcenter'
}
maven{
url 'http://maven.aliyun.com/nexus/content/groups/public'
}
}
dependencies {
classpath 'com.android.tools.build:gradle:3.1.2'
}
}
3.2.android/build.grale配置,新建Android項目以後，可能無法運行，配置國內鏡像
buildscript {
repositories {
// google()
// jcenter()
// 替換國內鏡像
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
dependencies {
classpath 'com.android.tools.build:gradle:3.2.1'
}
}
allprojects {
repositories {
// google()
// jcenter()
// 替換國內鏡像
maven { url 'https://maven.aliyun.com/repository/google' }
maven { url 'https://maven.aliyun.com/repository/jcenter' }
maven { url 'http://maven.aliyun.com/nexus/content/groups/public' }
}
}
2. 佈局控件入門
StatelessWidget
MaterialApp
home: 窗口主題
body: body 內容
child:
1. Text 控件
2. 容器控件 Container
3. 圖片組件
4. 列表組件ListView， 縱向列表、橫向列表
5. 動態列表ListView
6. gridView使用
7. Row 水平佈局
7.1. 水平線性佈局
7.2.平分控件 Expanded 平分控件,靈活的
7.3. 2邊 包裹內容，中間佔據整個區域大小 2測 包裹內容，中間 匹配父元素，權重設置爲1
8. Column 垂直佈局
9. 層疊佈局
FractionalOffset(0.5, 0.8),相對於 容器 Container 的位置 百分比 ，相對於左邊50%， 相對上面80%
相對佈局 Positioned 相對於 bottom: 10 底部， right: 10 右邊
import 'package:flutter/material.dart';
// MyApp 是一個類, 繼承 StatelessWidget
void main() => runApp(MyApp(
items:new List<String>.generate(100, (i)=>"item $i")
));
class MyApp extends StatelessWidget {
// This widget is the root of your application.
MyApp({Key key,@required this.items}):super(key:key);
final List<String> items;
@override
Widget build(BuildContext context) {
// 相對佈局 Positioned 相對於 bottom: 10 底部， right: 10 右邊
var stack =Stack(
// CircleAvatar 相對於 容器 Container 的位置 百分比 ，相對於左邊50%， 相對上面80%
alignment: FractionalOffset(0.5, 0.8),
children: <Widget>[
new Container(
decoration: new BoxDecoration(
color: Colors.pink
),
padding: EdgeInsets.all(5.0),
),
new CircleAvatar(
backgroundImage: new NetworkImage("http://www.kaadas.com/vancheerfile/Images/2019/8/2019080704511484.png"),
radius: 100.0,
),
new Positioned(
child: Text("hello jack"),
bottom: 10,
right: 10,
)
],
);
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
// 窗口主題
home: Scaffold(
appBar: AppBar(title: Text("ListView Widget"),),
// body 內容
body: Center(
// 1. Text 控件
// child: Text(
// "hello worldello worello worello worello worello worello worello worello worello worello worello wor",
// textAlign: TextAlign.left,
// maxLines: 1,
// overflow: TextOverflow.ellipsis,
// // 設置樣式
// style: TextStyle(
// fontSize: 35.0,
// color: Color.fromARGB(255, 255, 100, 100),
// decoration: TextDecoration.underline,
// decorationStyle: TextDecorationStyle.solid
//
// ),
// ),
//2. 容器控件
/** 注意：
* 1. container背景色和decoration不能同時設置
* 2.
*/
child: Container(
// child: Text(
// "我是容器控件的內容",
// style: TextStyle(
// fontSize: 30,
// ),
// ),
// 上左、中、右
// 下左、中、右對齊
alignment: Alignment.topLeft,
width: 300,
height: 500,
// color: Colors.lightBlue,
// padding: EdgeInsets.fromLTRB(10, 20, 0, 0),
// margin: EdgeInsets.all(40),
// decoration: BoxDecoration(
// border: Border.all(color: Color.fromARGB(255, 10, 10, 233)),
// ),
// 3. 圖片組件
// child:Image.network(
// "http://www.kaadas.com/vancheerfile/Images/2019/8/2019080704511484.png",
// fit: BoxFit.fill,
// ),
/** 配置本地圖片： 在更目錄下新建images目錄，pubspec.yaml 下配置路徑
* body: Center(
child: Image.asset("images/ic_launcher.png"),
)
*/
// 4. 列表組件ListView， 縱向列表、橫向列表
// child: ListView(
// // 可以指定橫向列表 ，裏面可以是ListTile，可以是Container 容器
// scrollDirection: Axis.vertical,
// children: <Widget>[
// new ListTile(
// leading: new Icon(Icons.perm_camera_mic),
// title: Text("perm_camera_mic"),
// ),
// new ListTile(
// leading: new Icon(Icons.add_call),
// title: Text("add_call"),
// )
// ],
// ),
// 5. 動態列表ListView
// child: ListView.builder(
// itemCount: items.length,
// itemBuilder: (context,index){
// return ListTile(
// title: Text('${items[index]}'),
// );
// },
// )
//
// ),
// 6. gridView使用
// child: GridView.count(
// padding: EdgeInsets.all(20.0),
// crossAxisSpacing: 10.0, // 間隙列之間
// crossAxisCount: 3 , // 每列 3個元素
// children: <Widget>[
// Text("hello1"),
// Text("hello2"),
// Text("hello3"),
// Text("hello4"),
// Text("hello5"),
// Text("hello6"),
// ],
// ),
// 7. gridview 寫法2
// child: GridView(gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
// crossAxisCount: 3,
// mainAxisSpacing: 2.0, //縱軸的間距
// crossAxisSpacing: 2.0, // 橫軸的間距
// childAspectRatio: 1, // 長寬比
// ),
// children: <Widget>[
// Text("Widget1"),
// Text("Widget2"),
// Text("Widget3"),
// Text("Widget4"),
// Text("Widget5"),
// Text("Widget6"),
// ],
// ),
// Row 水平佈局
// 1.水平線性佈局
// child: Row(
// children: <Widget>[
// new RaisedButton(
// onPressed: (){},
// color:Colors.redAccent,
// child: Text("Red Button--Red Button"),
// )
// , new RaisedButton(
// onPressed: (){},
// color:Colors.orangeAccent,
// child: Text("Button"),
// ),
// new RaisedButton(
// onPressed: (){},
// color:Colors.lightBlue,
// child: Text("li"),
// )
// ],
// ),
// 2.平分控件 Expanded 平分控件,靈活的
// child: Row(
// children: <Widget>[
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// color:Colors.redAccent,
// child: Text("Red Button--Red Button"),
// ),
// ),
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// color:Colors.lightBlue,
// child: Text("Red Button--Red Button"),
// ),
// ),
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// color:Colors.black,
// child: Text("Red Button--Red Button"),
// ),
// )
// ],
// ),
// 3. 2邊 包裹內容，中間佔據整個區域大小 2測 包裹內容，中間 匹配父元素，權重設置爲1
// child: Row(
// children: <Widget>[
// RaisedButton(
// onPressed: (){},
// color:Colors.redAccent,
// child: Text("Red1"),
// ),
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// color:Colors.lightBlue,
// child: Text("Red Button--Red Button"),
// ),
// ),
// RaisedButton(
// onPressed: (){},
// color:Colors.orangeAccent,
// child: Text("Red2"),
// ),
// ],
// ),
//8. Column 垂直佈局
// child: Column(
// // 文本左對齊、右對齊、居中對齊
// crossAxisAlignment: CrossAxisAlignment.end,
// // 垂直居中
// mainAxisAlignment: MainAxisAlignment.center,
// children: <Widget>[
// Text("I am a child....."),
// Expanded( // 填充所有剩餘控件
// child: Text("I 2")
// ),
// Text("I 3")
// ],
// ),
//9. 層疊佈局
child: stack,
),
),
),
// 窗口的主體
// home: MyHomePage(title: 'Flutter 變得更發給電飯鍋好電飯鍋電飯鍋地方剛發的的 Home Page'),
);
}
}
3. Flutter 頁面跳轉傳遞
import 'package:flutter/material.dart';
class Product{
final String title; //標題
final String desc;
Product(this.title,this.desc);
}
// MyApp 是一個類, 繼承 StatelessWidget
void main() => runApp(MyApp(
));
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
// body 內容
home: new FirstScreen()
);
}
}
class FirstScreen extends StatelessWidget{
List<Product> products= List.generate(20, (i)=>Product("商品$i","編號$i"));
@override
Widget build(BuildContext context) {
// TODO: implement build
/**
* 導航跳轉問題：https://blog.csdn.net/nimeghbia/article/details/84388725
* 外層不可以是： MaterialApp
*/
return Scaffold(
appBar: AppBar(title: Text("商品列表")),
body: ListView.builder(
itemCount: products.length,
itemBuilder: (context,index){
return ListTile(
title: Text( products[index].title),
// 這裏 通過 構造函數 傳遞值
onTap:(){
Navigator.push(
context,
MaterialPageRoute(builder: (context)=>new SecondScreen(products[index])
));
},
);
}
),
);
}
}
// 第二個頁面
class SecondScreen extends StatelessWidget{
Product product;
SecondScreen(Product pro){
this.product=pro;
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(product.title)),
body: Center(
child: RaisedButton(
child: Text("返回"),
onPressed: (){
Navigator.pop(context);
}
),
) ,
);
}
}
4. Flutter Android 打包
1. 生成簽名
jre/bin/下的 keytool:
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key
2. 配置簽名文件在項目android目錄下：
文件名： key.properties
內容：
storePassword=123456
keyPassword=123456
keyAlias=key
storeFile=/Users/denganzhi/key.jks
3. /android/app/build.gradle
添加：
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
4. 把 build.gradle
buildTypes {
release {
signingConfig signingConfigs.debug
}
}
替換
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile file(keystoreProperties['storeFile'])
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
signingConfig signingConfigs.release
}
}
5. 回到項目根目錄： 開始打包
flutter build apk