flutter框架一文通

最新推荐文章于 2023-10-17 22:28:14 发布

finedayforu

最新推荐文章于 2023-10-17 22:28:14 发布

阅读量238

点赞数

本文链接：https://blog.csdn.net/finedayforu/article/details/104154325

版权

第一部分 vscode终端操作快捷键
第二部分 hello world程序
第三部分常用组件
注意：由于现在flutter在中国还不够流行，文档和教程少一些，大部分时间只能看官方英文文档，不利于入门，所以我自己整理了一些表格用来记录组件和类，主要是为了方便自己日后查用。由于是自己整理的，属性方法都不是很全，我会一直更新此表格。也会更新到此文中。
我的文档地址(目前不完善，会持续更新)：

腾讯文档

第一部分 vscode终端操作快捷键：

运行模拟器：flutter run

更新页面：R

显示网格：P

android/IOS模式切换：O

关闭终端：Q

热更新方法：用debug，按照VS的提示配置即可，配置完成后如下

第二部分. 框架简介及hello world

一、总体架构

1、总体架构

其中engine部分：

* skia 图形UI框架

* dart 虚拟机dartVM

* text 渲染纹理

其中Framework部分：

+ foundation：功能接口

+ animation：动画

+ painting：图像

+ gestures：触控

+ rendering：渲染

+ widgets：组件

+ meterial：googleUI风格

+ cupertino：IOSUI风格

2、GPU渲染

3.状态控制

4.Flutter理论基础知识

二、写一个hello world程序

主程序在main.dart里

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main() => runApp(MyApp());         //main函数只有一句话:运行APP

class MyApp extends StatelessWidget{    //app继承于StatelessWidget组件对象
  @override                             //重构build方法
  Widget build(BuildContext context){  //组件的build的方法返回一个组件 参数是其上下文文件
    return MaterialApp(                 //返回方法 返回组件
      title: "welcome",                 //APP的title
      home: Scaffold(                   //APP的主体,其类型是一个脚手架Scaffold
        appBar: AppBar(                 //脚手架第一个组成是appbar
          title: Text("welcome to big bear's flutter!!!"),  //appbar的title
        ),
        body: Center(            //脚手架的第二个组成是body 给body一个center组件做内容
          child: Text("hello 熊爸haha!"),   //center里有一个子组件是 Text("???")
        ),
      ),
    );
  }
}

第三部分常用组件

statelesswidget 无状态变化的组件

statefullwidget 有状态变化的组件

一、文字组件 Text("")

1.textAlign （文本对齐）

Text的子属性，可传入TextAlign类对象，比如：

TextAlign.center 居中

TextAlign.left 左对齐

TextAlign.right 右对齐

TextAlign.start 和文字开始对齐

TextAlign.end 和文字结束对齐

2. maxLines （最大显示行数）

Text的子属性，可传入数值

        Text(
            "hello 熊爸haha!锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。",
            textAlign: TextAlign.end,
            maxLines: 1,
            )

3. overflow 溢出处理

Text的子属性，可传入TextOverflow类对象

$\begin{array}[a] {|a|ca|} \hline 对象 & 对象名称\\ \hline TextOverflow.clip & 溢出裁剪 \\ \hline TextOverflow.ellipsis & 溢出显示... \\ \hline TextOverflow.fade &最后一行上下渐变 \\ \hline \end{array}\\$

4. style 文字样式

Text的子属性，可传入TextStyle类对象

TextStyle类对象：

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main() => runApp(MyApp());         //main函数只有一句话:运行APP

class MyApp extends StatelessWidget{    //app继承于StatelessWidget组件对象
  @override                             //重构build方法
  Widget build(BuildContext context){   //组件的build的方法返回一个组件 参数是其上下文文件
    return MaterialApp(                 //返回方法 返回组件
      title: "welcome",                 //APP的title
      home: Scaffold(                   //APP的主体,其类型是一个脚手架Scaffold
        appBar: AppBar(                 //脚手架第一个组成是appbar
          title: Text("welcome to big bear's flutter!!!"),  //appbar的title
        ),
        body: Center(                   //脚手架的第二个组成是body 给body一个center组件做内容
          child: Text(
            "hello 熊爸熊爸熊爸haha!锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。",
            textAlign: TextAlign.left,
            maxLines: 1,
            overflow: TextOverflow.ellipsis,
            style: TextStyle(
              fontSize: 25.0,
              color:Color.fromARGB(255, 220, 125, 125),
              decoration: TextDecoration.underline,
              decorationStyle: TextDecorationStyle.wavy,
            ),
            ), //center里有一个子组件是 Text("???")
        ),
      ),
    );
  }
}

二、container组件 container() 容器

container() 相当于HTML里的div

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main() => runApp(MyApp());         //main函数只有一句话:运行APP

class MyApp extends StatelessWidget{    //app继承于StatelessWidget组件对象
  @override                             //重构build方法
  Widget build(BuildContext context){  //组件的build的方法返回一个组件 参数是其上下文文件
    return MaterialApp(                 //返回方法 返回组件
      title: "welcome",                 //APP的title
      home: Scaffold(                   //APP的主体,其类型是一个脚手架Scaffold
        appBar: AppBar(                 //脚手架第一个组成是appbar
          title: Text("welcome to big bear's flutter!!!"),  //appbar的title
        ),
        body: Center(            //脚手架的第二个组成是body 给body一个center组件做内容
          child: Container(
            height: 400.0,
            width: 300.0,
            //color: Colors.pinkAccent,
            margin: EdgeInsets.symmetric(horizontal: 010.0),
            decoration: new BoxDecoration(
              gradient: const LinearGradient(colors: [Colors.lightBlue,Colors.green],
                                            begin: Alignment.topLeft,
                                            end: Alignment.bottomRight,
                                            tileMode: TileMode.clamp,
                                            ),
              border: Border.all(width: 2.0,color: Colors.blueGrey),
              ),
            transform: Matrix4.rotationZ(0.1),
            alignment: Alignment.topLeft,
            padding: const EdgeInsets.fromLTRB(15.0, 30.0, 15.0, 0),
            child: Text(
              "锄禾日当午，汗滴禾下土，谁知盘中餐，粒粒皆辛苦！",
              style: TextStyle(
                fontSize: 24.0,
              ),
              maxLines: 1,
              overflow: TextOverflow.ellipsis,
              textAlign: TextAlign.center,
            ),
          ),   //center里有一个子组件是 Text("???")
        ),
      ),
    );
  }
}

三 image组件

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main() => runApp(MyApp());         //main函数只有一句话:运行APP

class MyApp extends StatelessWidget{    //app继承于StatelessWidget组件对象
  @override                             //重构build方法
  Widget build(BuildContext context){  //组件的build的方法返回一个组件 参数是其上下文文件
    return MaterialApp(                 //返回方法 返回组件
      title: "welcome",                 //APP的title
      home: Scaffold(                   //APP的主体,其类型是一个脚手架Scaffold
        appBar: AppBar(                 //脚手架第一个组成是appbar
          title: Text("welcome to big bear's flutter!!!"),  //appbar的title
        ),
        body: Center(            //脚手架的第二个组成是body 给body一个center组件做内容
          child: Container(
            height: 600.0,
            width: 400.0,
            color: Colors.lightBlue,
            child: Image.network(
              "http://cms-bucket.ws.126.net/2019/1228/d84b26e0p00q37jrh002uc0009c005uc.png?imageView&thumbnail=200y140",
              fit: BoxFit.scaleDown,
              repeat: ImageRepeat.repeat,
              color: Colors.pinkAccent,
              colorBlendMode: BlendMode.darken,
            )
          ), 
        ),
      ),
    );
  }
}

四 listView组件列表布局

ListView的children是组件类型，所以可以随便添加任意组件

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main() => runApp(MyApp());         //main函数只有一句话:运行APP

class MyApp extends StatelessWidget{    //app继承于StatelessWidget组件对象
  @override                             //重构build方法
  Widget build(BuildContext context){  //组件的build的方法返回一个组件 参数是其上下文文件
    return MaterialApp(                 //返回方法 返回组件
      title: "welcome",                 //APP的title
      home: Scaffold(                   //APP的主体,其类型是一个脚手架Scaffold
        appBar: AppBar(                 //脚手架第一个组成是appbar
          title: Text("welcome to big bear's flutter!!!"),  //appbar的title
        ),
        body: Center(
          child: Container(
            height: 200,
            color: Colors.pinkAccent,
            child: MyList001(),
          ),
        )
      ),
    );
  }
}
class MyList001 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView(
              scrollDirection: Axis.horizontal,
              children: <Widget>[
              Container(width: 180,color: Colors.lightBlue,),  
              Container(width: 180,color: Colors.pinkAccent,),
              Container(width: 180,color: Colors.lightGreen,),
              Container(width: 180,color: Colors.deepPurple,),                    
              ],
            );
  }
}

动态列表（参数传递内容的列表）

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp(
  items:List<String>.generate(15,(i)=>"Item $i")  //在myapp类里创建了一个属性叫items，它里面有一个列表
                      //里面的(i)=>"Item $i"是自动生成列表的项，就像python 列表中可以写lambda表达式一样
));

class MyApp extends StatelessWidget{    
  final List<String> items;            //类中建立属性items 
  MyApp({Key key,@required this.items}):super(key:key); 
  //Key key                  重写构造函数默认传入的
  //@required this.items     限定修饰  this.items必须传入
  //:super(key:key) 调用祖先/父类无名无参构造函数，StatelessWidget 所以需要super往上找
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(                   
        body:ListView.builder(               //用专门的builder方法构建动态列表
          itemCount: items.length,           //传入项目的数量
          itemBuilder: (context,index){      //传入context上下文，同时传入index 
                                             //这里有点像JS，把下文中需要的参数实现一下
            return ListTile(                 //listTile listview的项目瓦片
              title: Text("${items[index]}"), //通过重构函数，我们将外部的信息传入了动态列表中
            );
          },
        )
      ),
    );
  }
}

五网格列表布局

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("dasdasdas"),
        ),                   
        body:MyGridList(),
      ),
    );
  }
}
class MyGridList extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return GridView.count(
          padding: EdgeInsets.all(5.0),
          crossAxisSpacing:5,
          crossAxisCount: 3,
          mainAxisSpacing: 5,
          childAspectRatio: 0.7,
          children: <Widget>[
            Image.network("https://image11.m1905.cn/uploadfile/2019/0829/thumb_1_150_203_20190829041446876955.jpg",fit: BoxFit.cover,),
            Image.network("https://image11.m1905.cn/uploadfile/2019/1227/thumb_1_150_203_20191227090512473043.jpg",fit: BoxFit.cover,),
            Image.network("https://image11.m1905.cn/uploadfile/2019/0123/thumb_1_150_203_20190123044311875088.jpg",fit: BoxFit.cover,),
            Image.network("https://image11.m1905.cn/uploadfile/2018/0209/thumb_1_150_203_20180209015612332245.jpg",fit: BoxFit.cover,),
            Image.network("https://image11.m1905.cn/uploadfile/2014/0812/thumb_1_150_203_20140812031906771224.jpg",fit: BoxFit.cover,),
            Image.network("https://image11.m1905.cn/uploadfile/2009/1106/thumb_1_150_203_20091106112530726.jpg",fit: BoxFit.cover,),
            Image.network("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2577327061.webp",fit: BoxFit.cover,),
            Image.network("https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2578045524.jpg",fit: BoxFit.cover,),
            Image.network("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2556824333.jpg",fit: BoxFit.cover,),
            Image.network("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2574764569.jpg",fit: BoxFit.cover,),
            Image.network("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2568258113.jpg",fit: BoxFit.cover,),
            Image.network("https://img1.doubanio.com/view/photo/s_ratio_poster/public/p2541280047.jpg",fit: BoxFit.cover,),
          ],
          );
  }
}

六.按钮组件

七.水平布局

Row组件水平布局，搭配Expanded组件可实现灵活的水平布局

对Row来说主轴是水平方向

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("熊爸"),
        ),                   
        body:Row(

          children: <Widget>[
            RaisedButton(
              onPressed: (){print("点击了");},
              color: Colors.amberAccent,
              child: Text("amberAccent"),
            ),
            Expanded(child: RaisedButton(
              onPressed: (){print("点击了");},
              color: Colors.lightBlue,
              child: Text("lightBlue"),
            ),),
            Expanded(child: RaisedButton(
              onPressed: (){print("点击了");},
              color: Colors.pinkAccent,
              child: Text("pinkAccent"),
            ),)
          ],
        ),
      ),
    );
  }
}

八垂直布局

对Row来说主轴是垂直方向

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("熊爸"),
        ),                   
        body:Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("熊爸"),
            Expanded(child: Text("锄禾日当午，汗滴禾下土。谁知盘中餐，粒粒皆辛苦。"),),
            Text("data"),
          ],
        ),
      ),
    );
  }
}

九 Stack组件、Position组件（层叠布局）

两层堆叠用Stack组件

多层堆叠用Position组件

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("熊爸"),
        ),                   
        body:Stack(
          alignment: FractionalOffset(0.5,0.9),
          children: <Widget>[
            CircleAvatar(child: Text("一部电影"),radius: 200,foregroundColor: Colors.purple,backgroundImage: NetworkImage("https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2578045524.jpg"),),
            Container(
              width: 100,
              height: 50,
              color: Colors.lightBlue,
              alignment: Alignment.center,
              child: Text("本月最佳",style: TextStyle(color: Colors.white),),
            )
          ],
        ),
      ),
    );
  }
}

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("熊爸"),
        ),                   
        body:Stack(
          alignment: FractionalOffset(0.5,0.9),
          children: <Widget>[
            CircleAvatar(child: Text("一部电影"),radius: 200,foregroundColor: Colors.purple,backgroundImage: NetworkImage("https://img9.doubanio.com/view/photo/s_ratio_poster/public/p2578045524.jpg"),),
            Positioned(
              top: 10.0,
              left: 20.0,
              child: Text("haha")
            ),
            Positioned(
              bottom: 10.0,
              right: 20.0,
              child: Text("OKOK")
            ),
          ],
        ),
      ),
    );
  }
}

十圆盘组件

十一瓦片组件

十二卡片布局

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Scaffold(
        appBar: AppBar(
          title: Text("熊爸"),
        ),                   
        body:Card(
          borderOnForeground: true,
          child: Column(
            children: <Widget>[
              ListTile(
                title: Text("anny baby",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
                subtitle: Text("a lovely girl"),
                leading: CircleAvatar(backgroundImage: NetworkImage("https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2572847101.webp"),),
              ),
              Divider(),
              ListTile(
                title: Text("anny baby",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
                subtitle: Text("a lovely girl"),
                leading: Icon(Icons.satellite),
                trailing: Icon(Icons.keyboard_arrow_right),
              ),
              Divider(),
              ListTile(
                title: Text("anny baby",style: TextStyle(fontSize: 24,fontWeight: FontWeight.bold),),
                subtitle: Text("a lovely girl"),
                leading: Icon(Icons.satellite),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

十三分割线组件

Divider()

十四导航

        import 'package:flutter/material.dart'; 
void main() => runApp(MyApp());

class MyApp extends StatelessWidget{    
  @override                             
  Widget build(BuildContext context){  
    return MaterialApp(                 
      title: "welcome",                 
      home: Firstscreen(),
    );
  }
}
class Firstscreen extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("hello"),),
      body: Center(
        child: RaisedButton(
          child: Text("下一页"),
          color: Colors.lightBlue,
          shape: StadiumBorder(),
          onPressed: (){Navigator.push(context, MaterialPageRoute(
            builder: (context)=>SecondScreen()
          ));},
          ),
      )
    );
  }
}
class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("data"),),
      body: Center(
        child: RaisedButton(child: Text("返回"),onPressed:(){
          Navigator.push(context, MaterialPageRoute(
            builder: (context)=>Firstscreen()
          ));
        }),
      ),
    );
  }
}

十五带参数传递的导航

        import 'package:flutter/material.dart';

class Product {
  final String title;
  final String description;
  Product(this.title,this.description);
}
void main() {
  runApp(MyApp(products: List.generate(50,(i)=>Product("商品$i","这是一个商品详情，编号为$i")),));
}

class MyApp extends StatelessWidget {
  final List<Product> products;
  const MyApp({Key key,@required this.products}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
    title: "test1",
    home: ProductList(
      products:List.generate(products.length, (i)=>products[i])),
    );
  }
}
class ProductList extends StatelessWidget {
  final List<Product> products;
  const ProductList({Key key,@required this.products}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("products"),),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (BuildContext context, int index) {
        return ListTile(
          title: Text(products[index].title),
          onTap: (){
            Navigator.push(context, MaterialPageRoute(
              builder: (context)=>SecondPage(product: products[index],)
            ));
          },
        );
       },
      ),
      );
  }
}
class SecondPage extends StatelessWidget {
  final Product product;
  const SecondPage({Key key,@required this.product}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("商品详情"),),
      body: Text(product.description),
    );
  }
}

十六异步请求和等待

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main(){
  runApp(MaterialApp(
    title: "页面跳转",
    home:FirstPage(),
  ));
}
class FirstPage extends StatelessWidget {
  const FirstPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("dataa"),),
      body: Center(child:RouteBut()),
    );
  }
}
class RouteBut extends StatelessWidget {
  const RouteBut({Key key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      shape: StadiumBorder(),
      onPressed: (){
        _navi_in(context);
      },
      color: Colors.lightBlue,
      child: Text("进入"),
    );
  }
  _navi_in(BuildContext context) async{
    final result=await Navigator.push(context,
    MaterialPageRoute(
      builder: (contex)=>SecondPage()
    )
    );
    Scaffold.of(context).showSnackBar(SnackBar(content: Text(result),));
  }
}
class SecondPage extends StatelessWidget {
  const SecondPage({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Scaffold(
        appBar: AppBar(title: Text("设置返回数据"),),
        body: Center(
          child: Column(
            children: <Widget>[
              RaisedButton(
                child: Text("返回数据1"),
                onPressed: (){
                  Navigator.pop(context,"数据1");
                },
              ),
              RaisedButton(
                child: Text("返回数据2"),
                onPressed: (){
                  Navigator.pop(context,"数据2");
                },
              ),
            ],
          ),
        ),
      ),
    );
  }
}

十七加载静态资源

在项目里创建一个资源文件夹,放入资源

找到pubspec.yaml文件并打开

注册资源:

注册后就可以引用了

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return  MaterialApp(
      title: "myAPP",
      home: Scaffold(
        appBar: AppBar(title: Text("daaata"),),
        body:Container(
          child: Image.asset("images/test1.jpg"),
        )
      ),
    );
  }
}

十八 Expanded //拓展组件

Expanded 组件可以让 Row、Column、Flex等子组件在其主轴方向上展开并填充可用空间。类似 Android 中的 widget 属性的用法

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO

void main() => runApp(MyApp()); //main函数只有一句话:运行APP

class MyApp extends StatelessWidget {
  //app继承于StatelessWidget组件对象
  @override //重构build方法
  Widget build(BuildContext context) {
    //组件的build的方法返回一个组件 参数是其上下文文件
    final mytitle = "listview";
    return MaterialApp(
      //返回方法 返回组件
      title: mytitle, //APP的title
      home: Scaffold(
          //APP的主体,其类型是一个脚手架Scaffold
          appBar: AppBar(
            //脚手架第一个组成是appbar
            title: Text(mytitle), //appbar的title
          ),
          body: Row(
            children: <Widget>[
              Image.network(
                "https://i0.hdslb.com/bfs/bangumi/b919ca54abfa2aaed952f197da67211118944923.jpg@144w_144h.webp",
                width: 50,
              ),
              Text("这是一个非常非常非常非常长的句子!!!长到这个ROW放不下了!!!"),
              Icon(Icons.sentiment_satisfied),
            ],
          )),
    );
  }
}

如果用上expanded组件则:

        import 'package:flutter/material.dart'; // 一个UI库 www.Material.IO

void main() => runApp(MyApp()); //main函数只有一句话:运行APP

class MyApp extends StatelessWidget {
  //app继承于StatelessWidget组件对象
  @override //重构build方法
  Widget build(BuildContext context) {
    //组件的build的方法返回一个组件 参数是其上下文文件
    final mytitle = "listview";
    return MaterialApp(
      //返回方法 返回组件
      title: mytitle, //APP的title
      home: Scaffold(
          //APP的主体,其类型是一个脚手架Scaffold
          appBar: AppBar(
            //脚手架第一个组成是appbar
            title: Text(mytitle), //appbar的title
          ),
          body: Row(
            children: <Widget>[
              Image.network(
                "https://i0.hdslb.com/bfs/bangumi/b919ca54abfa2aaed952f197da67211118944923.jpg@144w_144h.webp",
                width: 50,
              ),
              Expanded(child: Text("这是一个非常非常非常非常长的句子!!!长到这个ROW放不下了!!!所以expanded组件就自动修改了一下文本样式,终于让ROW能显示了!!!"),),
              Icon(Icons.sentiment_satisfied),
            ],
          )),
    );
  }
}

第四部分打包与发布

Android打包(VScode)

一配置APP图标

图标目录: /android/app/src/main/res/

进入之后你会看到很多mipmap-为前缀命名的文件夹，后边的是像素密度，可以看出图标的分辨率。

mdpi (中) ~160dpi
hdpi （高） ~240dip
xhdpi （超高） ~320dip
xxhdpi （超超高） ~480dip
xxxhdpi （超超超高） ~640dip

将对应像素密度的图片放入对应的文件夹中,图片记得用png格式，记得名字要统一，才能一次性进行配置。

二配置AndroidManifest.xml

这个文件主要用来配置APP的名称、图标和系统权限，所在的目录在:/android/app/src/main/AndroidManifest.xml

        android:label="flutter_app"   //配置APP的名称，支持中文
android:icon="@mipmap/ic_launcher" //APP图标的文件名称

三生成keystore

        keytool -genkey -v -keystore e:/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

在安卓根目录建立key属性文件,并配置

        storePassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥库 密码
keyPassword=<password from previous step>    //输入上一步创建KEY时输入的 密钥 密码
keyAlias=key
storeFile=<E:/key.jks>    //key.jks的存放路径

四配置android\app\build.gradle

在android{}上面添加如下代码:

        def keystorePropertiesFile = rootProject.file("key.properties")
def keystoreProperties = new Properties()
keystoreProperties.load(new FileInputStream(keystorePropertiesFile))

把下面内容替换

替换成:

        signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}
buildTypes {
    release {
        signingConfig signingConfigs.release
    }
}

五生成APK

运行命令:

        flutter build apk

十九 Android打包(AS)

finedayforu

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flutter框架一文通

第一部分 vscode终端操作快捷键第二部分 hello world程序第三部分常用组件注意：由于现在flutter在中国还不够流行，文档和教程少一些，大部分时间只能看官方英文文档，不利于入门，所以我自己整理了一些表格用来记录组件和类，主要是为了方便自己日后查用。由于是自己整理的，属性方法都不是很全，我会一直更新此表格。也会更新到此文中。我的文档地址(目前不完善，会持续更新)：...
复制链接

扫一扫