1. 通过WebView包裹，就是网页在APP中，技术phonegap、
2. ReactNative、Weex: 使用js封装原生anroid、ios控件
3. flutter: 原生
Flutter 配置上手：
1. Flutter Sdk 配置
Flutter Sdk:
下载路径：
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/adlebuildscript {repositories {// google()// jcenter()maven{url ''}maven{url ''}}dependencies {classpath 'ls.build:gradle:3.1.2'}
}3.2.ale配置,新建Android项目以后，可能无法运行，配置国内镜像buildscript {repositories {// google()// jcenter()// 替换国内镜像maven { url '' }maven { url '' }maven { url '' }}dependencies {classpath 'ls.build:gradle:3.2.1'}
}allprojects {repositories {// google()// jcenter()// 替换国内镜像 maven { url '' }maven { url '' }maven { url '' }}
} 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;@overrideWidget 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(".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: pLeft,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)),
// ),
// 设置圆角
// borderRadius: BorderRadius.circular(8.0),// 3. 图片组件
// child:Imagework(
// ".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: unt(
// 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: (){},
// dAccent,
// child: Text("Red Button--Red Button"),
// )
// , new RaisedButton(
// onPressed: (){},
// angeAccent,
// child: Text("Button"),
// ),
// new RaisedButton(
// onPressed: (){},
// color:Colors.lightBlue,
// child: Text("li"),
// )
// ],
// ),// 2.平分控件 Expanded 平分控件,灵活的
// child: Row(
// children: <Widget>[
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// dAccent,
// 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: (){},
// dAccent,
// child: Text("Red1"),
// ),
// Expanded(
// child: RaisedButton(
// onPressed: (){},
// color:Colors.lightBlue,
// child: Text("Red Button--Red Button"),
// ),
// ),
// RaisedButton(
// onPressed: (){},
// angeAccent,
// child: Text("Red2"),
// ),
// ],
// ),//8. Column 垂直布局
// child: Column(
// // 文本左对齐、右对齐、居中对齐
// crossAxisAlignment: d,
// // 垂直居中
// mainAxisAlignment: ,
// children: <Widget>[
// Text("I am "),
// Expanded( // 填充所有剩余控件
// child: Text("I 2")
// ),
// Text("I 3")
// ],
// ),//9. 层叠布局child: stack,),),),// 窗口的主体// home: MyHomePage(title: 'Flutter 变得更发给电饭锅好电饭锅电饭锅地方刚发的的 Home Page'),);}
}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.@overrideWidget build(BuildContext context) {return MaterialApp(// body 内容home: new FirstScreen());}
}
class FirstScreen extends StatelessWidget{List<Product> products= ate(20, (i)=>Product("商品$i","编号$i"));@overrideWidget build(BuildContext context) {// TODO: implement build/*** 导航跳转问题：* 外层不可以是： 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;}@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(product.title)),body: Center(child: RaisedButton(child: Text("返回"),onPressed: (){Navigator.pop(context);}),) ,);}}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/adle
添加：
def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
4. 把 adle
buildTypes {
release {
signingConfig signingConfigs.debug
}
}
替换
signingConfigs {
release {
keyAlias keystoreProperties['keyAlias']
keyPassword keystoreProperties['keyPassword']
storeFile file(keystoreProperties['storeFile'])
storePassword keystoreProperties['storePassword']
}
}
buildTypes {
release {
lease
}
}
5. 回到项目根目录： 开始打包
flutter build apk
本文发布于:2024-01-28 04:02:32，感谢您对本站的认可！
本文链接：https://www.4u4v.net/it/17063857814633.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
| 留言与评论（共有 0 条评论） |
