Flutter初学

最新推荐文章于 2022-04-03 21:31:24 发布
最新推荐文章于 2022-04-03 21:31:24 发布
阅读量965 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Asu_yu/article/details/104493306
版权

Flutter初学


在这里插入图片描述
可同时运行在Android和IOS系统上，方便。控件布局不用写xml文件，与功能代码一起写。
Flutter是谷歌的移动UI框架 ，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。它也是构建未来的Google Fuchsia应用的主要方式。
Flutter组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。
在这里插入图片描述

代码

运行入口 - 写得任何类都要在main方法里去启动

void main(){
  //接受指定的控件  - 覆盖全屏
  runApp(new MaterialApp(
    title: '我的应用',
    //启动功能类
    home: new Counter()
  ));
}

stateless(无状态) 控件没有内部状态来管理,Icon,IconButton,Text都是无状态控件的示例,它们都是StatelessWidget的子类。
stateful(有状态)控件是动态的,用户可以与有状态的控件(比如通过键入内容或者移动滑块)进行交互,或者随着时间的推移而变化(比如有数据时UI更新)，Checkbox，Radio ，From，StatefulWidget的子类

基本展示

两个类一起运行

//
class MyAppBar extends StatelessWidget{
  MyAppBar({this.title});
  final Widget title;
  @override
  Widget build(BuildContext context) {
    // container容器 -矩形方块
    return new Container(
      //容器高
      height: 100,
      //内边距 左右水平填充8像素
      padding: const EdgeInsets.symmetric(horizontal: 8.0),
      //BoxDecoration矩形设计样式 -  背景 边框 阴影
      decoration: new BoxDecoration(color: Colors.blue[500]),

      //容器内部为Row ,横向
      child: new Row(
        //控件组
        children: <Widget>[
          //iconbutton - 功能
          new IconButton(
            //具体描述
              icon: new Icon(Icons.menu),tooltip: '导航菜单', onPressed: null),
          //expanded的作用是展开Row,Column和Flex的子控件，可以使用剩余空间
          new Expanded(child: title),
          new IconButton(icon: new Icon(Icons.search),tooltip: '搜索', onPressed: null)
        ],
      ),
    );
  }
}

class MyLinearLayout extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    //Material 和 center类似
    return new Material(
      //垂直纵向
      child: new Column(
        //能多个子控件
        children: <Widget>[
          new MyAppBar(
            title: new Text('实例标题',
        style: Theme.of(context).primaryTextTheme.title,//标题的风格
            ),
          ),
          //可拓展文本域
          new Expanded(
            //子控件放在中间
              child: new Center(
                child: new Text('hellow'),
              )
          )
        ],
      ),
    );
  }
}

效果

在这里插入图片描述
手势处理：

GestureDetector 相当于onClickListener点击事件

onTap 相当于点击事件
print 打印控制台


///手势处理
class MyButton extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    ///GestureDetector == onClickLisenter
    return new GestureDetector(
      //文本输出
      onTap: (){
        print("被监听");
      },
      child: new Container(

        height: 10.0,
        //内边距 四个方向
        padding: const EdgeInsets.all(8.0),
        //外边距 - 左右
        margin: const EdgeInsets.symmetric(horizontal: 8.0),
        //对矩形进行操作 - 添加圆角、背景颜色
        decoration: new BoxDecoration(
          //背景圆角
          borderRadius: new BorderRadius.circular(100.0),
          //背景色
          color: Colors.lightGreen[500]
        ),
        child: new Center(
          //点击文本 ， onTap才被触发
          child: new Text('点击监听'),
        ),
      ),
    );
  }
}

效果
在这里插入图片描述
根据用户操作改变控件：
这里需要更新UI界面，要继承StatefulWidget
加载的另一个类的泛型要写第一个类才能启动加载出功能类

FloatingActionButton 悬浮按钮

///根据用户输入改变控件
class Counter extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    //加载另一个类
    return new CounterState();
  }
}
//功能都在这个类里
class CounterState extends State<Counter>{
  int count = 0;
  //数字++
  void _increment(){
    setState(() {
      count+=1;
    });
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(title: new Text('Flutter 实例')),
      body: new Center(
        //点击通过 _increment方法 改变文本
        child: new Text('按钮点击$count次${count == 0 ? '':''}'),
      ),
      //悬浮按钮
      floatingActionButton: new FloatingActionButton(
        //调用数量计算方法
        onPressed: _increment,
        tooltip: '增加',
        //按钮的功能 - ++
        child: new Icon(Icons.add),
      ),
    );
  }

}

效果：
在这里插入图片描述

Scaffold是实现基本质感设计可视化的布局结构：

appbar


class TutoriaHome extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    /**
     * Scaffold 是实现基本质感设计可视化的布局结构，
     * 使用多种不同的控件作为命名参数，并将每一个布置在Scaffold适当的位置
     */
    return new Scaffold(
      //头部标题部分
      appBar: new AppBar(
        leading: new IconButton(icon: new Icon(Icons.menu), tooltip: '导航菜单',onPressed: null),
        title: new Text('实例标题'),
        actions: <Widget>[
          new IconButton(icon: new Icon(Icons.search),tooltip: '搜索', onPressed: null)
        ],
      ),
      body: new Center(
        child: new Text('hellow'),
      ),
      //悬浮按钮
      floatingActionButton: new FloatingActionButton(tooltip: '增加',child: new Icon(Icons.add),onPressed: null),
    );
  }
}

效果对比：
之前的：在这里插入图片描述
现在的：
在这里插入图片描述

Container容器：

//边框容器  center 是出现在中间，Container矩形方块
class ContainerDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Center(
      child: new Container(
        //具体范围
        width: 300.0,
        height: 300.0,
        child: new Text('边框'),
        decoration: new BoxDecoration(
          //盒子背景
          color: Colors.blue[100],
          //边框色 all 是四周
          border: new Border.all(color: const Color(0xff6d9eed),width: 8.0),
        ),
      ),
    );
  }
}

效果：
在这里插入图片描述

文本展示：

///文本控件
class TextDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('文本控件'),
      ),
      body: new Column(
        children: <Widget>[
          new Text('红色+黑色删除线+25号',style: new TextStyle(
            color: const Color(0xffff0000),
            decoration: TextDecoration.lineThrough,
            decorationColor: const Color(0xff000000),
            fontSize: 25.0,
          ),),
          new Text('橙色+下划线+24号',style: new TextStyle(
            color: const Color(0xffff9900),
            decoration: TextDecoration.underline,
            fontSize: 24.0,
          ),),
          new Text('虚线上划线+23号+倾斜',style: new TextStyle(
            decoration: TextDecoration.overline,
            decorationStyle: TextDecorationStyle.dashed,
            fontSize: 23.0,
            fontStyle: FontStyle.italic,
          ),),
          new Text('serif字体 +22号',style: new TextStyle(
            fontFamily: 'serif',
            fontSize: 22.0,
          ),),
          new Text('monospace+21号，+加粗',style: new TextStyle(
            fontFamily: 'monospace',
            fontSize: 21.0,
            fontWeight: FontWeight.bold,
          ),),
          new Text('天蓝色+20号+2行跨度',style: new TextStyle(
            color: const Color(0xff4a86e8),
            fontSize: 20.0,
            height: 2.0,
          ),),
          new Text('19号，2个字母跨度',style: new TextStyle(
            fontSize: 19.0,
            letterSpacing: 2.0,
          ),)
        ],
      ),
    );
  }
}

效果：
在这里插入图片描述

获取网络图片和本地图片：

创建Assets文件夹在这里插入图片描述
本地获取图片需要在在这里插入图片描述
写出图片路径在这里插入图片描述


class ImageDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('URL获取图片'),
      ),
      body: new Column(
        children: <Widget>[
        //网络图片
          new Image.network('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1562587162663&di=58b961a5726901f5d3b97f8924ddc189&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201811%2F10%2F20181110102045_jwqny.jpg',scale: 1.0,),
//          new Image(image: new AssetImage('images/a/png'))
		//本地图片
        new Image.asset('images/a.png'),
        ],
      ),
    );
  }
}

在这里插入图片描述
效果：
在这里插入图片描述

布局：
水平和垂直一样，只需把排版方式Row（横向）换成Column（纵向）

Flexible 可拓展 自带涟漪效果


//水平布局
class Layout_demo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('水平布局'),
      ),
      body: new Row(
        children: <Widget>[
          new RaisedButton(onPressed: (){
            print('点击红色按钮');
          },
            color: const Color(0xffcc0000),
            child: new Text('红色按钮'),
          ),
          //可拓展
          new Flexible(
            //强制对剩余空间进行分配
              flex: 1,
              fit: FlexFit.tight,
              child: new RaisedButton(onPressed: (){
            print('点击黄色按钮');
          },
              color:  const Color(0xfff1c232),
              child: new Text('黄色按钮'),)),
          new RaisedButton(onPressed: (){
            print('点击粉色按钮');
          },
            color: const Color(0xffea9999),
            child: new Text('粉色按钮'),),
        ],
      ),
    
    );
  }
}

效果：
在这里插入图片描述
层叠效果：

Stack 层叠

///层叠定位控件
class StackDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text( '层叠布局'),
      ),
      body: new Center(
        //层叠控件 后面的出现在最上面
        child: new Stack(
          children: <Widget>[

            new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
            //展示的文本
            new Positioned(
              left: 30.0,
              top: 30.0,
              child: new Text('文本',style: new TextStyle(fontSize: 20.0,fontFamily: 'serif'),),)
          ],
        ),
      ),
    );
  }
}

效果：
在这里插入图片描述
列表展示滚动：

Listview 列表滚动


class listDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('list布局'),
      ),
      //列表展示
      body: new ListView(
        children: <Widget>[
          new Center(
            child: new Text('aaaa',style: new TextStyle(fontSize: 20.0,fontFamily: 'serif'),),
          ),
          new Center(
            child: new Image.network('http://img2.cxtuku.com/00/13/12/s97783873391.jpg'),
          ),
          new Center(
            child: new Text('''这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                这是文本内容,
                ''',style: new TextStyle(fontSize: 16.0,fontFamily: 'serif'),),
          )
        ],
      ),
    );
  }
}

对齐：

///对齐
class AlignDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('对齐'),
      ),
      //层叠
      body: new Stack(
        children: <Widget>[
          new Align(
            //坐标左上角
            alignment: new FractionalOffset(0, 0),
            child: new Image.network('http://img03.sogoucdn.com/app/a/100520021/6442EAF86C408DE5F9CCB58B729434D0'),
          ),
          new Align(
            //对齐方式 - 右下角	
            alignment: FractionalOffset.bottomRight,
            child: new Image.network('http://img03.sogoucdn.com/app/a/100520021/6442EAF86C408DE5F9CCB58B729434D0'),
          )
        ],
      ),
    );
  }
}

效果：
在这里插入图片描述

内填充：

///填充
class PaddingDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('内填充'),
      ),
      body: new Padding(
        //内边距 - 四周
          padding: const EdgeInsets.all(10.0),
        child: new Image.network('http://img03.sogoucdn.com/app/a/100520021/6BBA67224AAE9528C0790FD9E7EB05F7'),
      ),
    );
  }
}

强制大小

///强制大小
class SizeBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('强制大小'),
      ),
      body: new SizedBox(
        //强制容器大小
        width: 200.0,
        height: 200.0,
        child: new Container(
          decoration: new BoxDecoration(
            color: Colors.lightBlueAccent,
          ),
        ),
      ),
    );
  }
}

强制宽高比：

///强制比
class AspectRatioDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('强制比'),
      ),
      body: new AspectRatio(
        //宽：高
        aspectRatio: 2.0/5.0,
      child: new Container(
        decoration: new BoxDecoration(color: Colors.lightBlueAccent),
      ),),
    );
  }
}

装饰容器：DecoratedBox 渐变

///装饰容器 DecoratedBox
class DecoratedBoxDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('装饰容器'),
      ),
      body: new DecoratedBox(decoration: new BoxDecoration(
        gradient: new LinearGradient(//线性渐变
          begin: const FractionalOffset(0.0, 0.0),//渐变从左上角
            end: const FractionalOffset(1.0, 1.0),//结束于右下角
            colors: <Color>[const Color(0xfffff2cc),const Color(0xffff6eb4),const Color(0xffff00ff)]
        )
      ),
      //展现的容器
      child: new Container(
        width: 200,
        height: 200,
      ),),
    );
  }
}

效果：
在这里插入图片描述

透明度： Opacity

///Opacity 不透明度 调整的是子控件的不透明度 ， 0.0~1.0之间
class OpacityDemo extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('不透明度'),
      ),
      body: new Center(
        child: new Opacity(
          //透明度
          opacity: 0.2,
          //展示容器
          child: new Container(
            width: 200,
            height: 200,
            //颜色
            decoration: new BoxDecoration(color: const Color(0xfff00000)),
        ),),
      ),
    );
  }
}

效果：
在这里插入图片描述

PopupMenuButton 弹出菜单控件

点击即可消失菜单
用了GestureDetector点击后，不会消失菜单

///popupMenuButton 弹出菜单控件
class MenuDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _MenuDemo();
  }

}
///
class _MenuDemo extends State<MenuDemo>{
  String bodyStr='点击显示';
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('菜单演示'),
        actions: <Widget>[
          new PopupMenuButton(
              itemBuilder: (BuildContext context) => [
                new PopupMenuItem(
                  //GestureDetector 相当于onClickListener
                  child: new GestureDetector(
                    onTap: (){
                      print('选项1的值');
                    },
                    child: new Text('选项1'),
                  ),
                  value: '选项1的值',
                ),
                new PopupMenuItem(
                  child: new Text('选项2'),
                  value: '选项2的值',
                )
              ]
          )
        ],
      ),
      body: new Center(
        child: new Text(bodyStr),
      ),
    );
  }
}

效果：
在这里插入图片描述

底部导航栏： bottomNavigationBar

///底部导航页
class NavigationBarWidgeDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _NavigationBarWidgetDemoState();
  }

}

class _NavigationBarWidgetDemoState extends State<NavigationBarWidgeDemo>{

  String _menuStr='menu';
  var _currentIndex= 0;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('底部导航'),
        actions: <Widget>[
          new PopupMenuButton(
              itemBuilder: (BuildContext context) => [
                new PopupMenuItem(
                  //GestureDetector 相当于onClickListener
                  child: new GestureDetector(
                    onTap: (){
                      print('选项1的值');
                    },
                    child: new Text('选项1'),
                  ),
                  value: '选项1的值',
                ),
                new PopupMenuItem(
                  child: new Text('选项2'),
                  value: '选项2的值',
                )
              ]
          )
        ],
      ),
      body: new Center(
        child: new Text(_menuStr),
      ),
      bottomNavigationBar: 
      //底部导航栏数组
      	new BottomNavigationBar(items: <BottomNavigationBarItem>[
        new BottomNavigationBarItem(icon: new Icon(Icons.settings),title: new Text('tools')),
        new BottomNavigationBarItem(icon: new Icon(Icons.games),title: new Text('games')),
        new BottomNavigationBarItem(icon: new Icon(Icons.person),title: new Text('person')),
      ],
        //选中颜色
        selectedItemColor: Colors.blue,
        //未选中颜色
        unselectedItemColor: Colors.black38,
        //选中下标
        currentIndex: _currentIndex,
        onTap: (int index){
            //事件
          setState(() {
            _currentIndex=index;
            _menuStr="menu index is $index";
          });

        },
      ),
    );
  }

}

效果：
在这里插入图片描述

网络请求

dio: ^3.0.9
http: 0.12.0+4

网络请求依赖
在这里插入图片描述

void gethttp() async{

//    try{
      Response response=await Dio().get('http://vueshop.glbuys.com/api/home/index/slide?token=1ec949a15fb709370f')   ;
      return print(response);
//    }catch(e){
//      return print(e);
//    }

  }

读取写入文件

path_provider: 1.6.1
读写内存需要

//读取写入文件
class ReadAndWriteDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _ReadAndWriteDemo();
  }
}
class _ReadAndWriteDemo extends State<ReadAndWriteDemo>{
  //全局变量，点击数
  int _count;

  //创建状态对象 - 状态发生改变时，作为构造方法把点击数传给变量_count
  @override
  void initState() {

    super.initState();
    /**
     * 调用_readCount，读取点击数
     * 将点击数作为参数，创建一个方法
     */
    _readCount().then((int value){
      setState(() {
        _count=value;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('读取文件操作'),
      ),
      body: new Center(
        child: new Text('点击按钮${_count==0 ? '' : '$_count次'}！'),
      ),
      floatingActionButton: new FloatingActionButton(
          onPressed: _incrementCount,
        tooltip: '增加',
        child: new Icon(Icons.add),
      ),
    );
  }

  /// 读取点击数,关键字async表示异步操作
  /// 返回Future类型,表示延迟处理的对象  --读取本地文件中的数字
  Future<int> _readCount() async{
    try{
      File file = await _getLocalFile();
      //使用给定的编码将整个文件内容读取为字符串
      String contents=await file.readAsString();
      //返回点击数
      return int.parse(contents);
    }on FileSystemException{
      //发生异常时返回默认值
      return 0;
    }


  }

  ///得到本地文件
  Future<File> _getLocalFile() async{
    //获取本地文档目录
    String dir = (await getApplicationDocumentsDirectory()).path;
    //返回本地文件目录
    return new File('$dir/counter.text');
  }
  ///_incrementCount 点击增加按钮时的回调 - 点击按钮时，写入文件
  Future<Null> _incrementCount() async{
    setState(() {
      //存储点击数的变量 自动+1
      _count++;
    });
    //将点击数作为字符串写入文件
    await (await _getLocalFile()).writeAsString('$_count');
  }
}

进度条 linearProgressIndicator


///进度条  linearProgressIndicator 是质感设计中的线性进度指示器
class linearProgressIndicatorDemo extends StatelessWidget{
  int maxEmergy; //能量
  int maxHunger; // 饥饿
  int maxMood; //情绪
  int currentEmergy;
  int currentHunger;
  int currentMood;

  //构造 传递参数
  linearProgressIndicatorDemo({
    this.maxEmergy, this.maxHunger, this.maxMood,
    this.currentEmergy, this.currentHunger, this.currentMood
  });

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('线性进度条'),
      ),
      body: new Container(
        child: new Column(
          children: <Widget>[
            _getNameText(context, '能量($currentEmergy/$maxEmergy)'),
            //进度条 backgroundColor总长度背景色 ，valueColor进度背景色
            new LinearProgressIndicator(value: currentEmergy/maxEmergy,
            backgroundColor: Colors.deepOrange,valueColor: new AlwaysStoppedAnimation(Colors.orange),),
            _getNameText(context, '饥饿($currentHunger/$maxHunger)'),
            new LinearProgressIndicator(value: currentHunger / maxHunger,
            backgroundColor: Colors.amberAccent,valueColor: new AlwaysStoppedAnimation(Colors.brown)),
            _getNameText(context, '心情($currentMood/$maxMood)'),
            new LinearProgressIndicator(value: currentMood / maxMood,
            backgroundColor: Colors.pink,valueColor: new AlwaysStoppedAnimation(Colors.greenAccent))

          ],
        ),
      ),
    );
  }

  Align _getNameText(BuildContext context,String text){
    return new Align(
      //文本出现的位置
      alignment: FractionalOffset.topLeft,
      child: new Text(text,style: new TextStyle(fontSize: 15.0,color: Colors.black,height: 1.5),),

    );
  }
}

效果：

在这里插入图片描述

卡片Card TabBarView

切换页面


///枚举类 标签演示样式
enum TabsDemoStyle { iconsAndText,iconOnly,textOnly}
///页面类，图标，文本
class _Page{

  final IconData icon;
  final String text;
//  final MaterialColor color;

  _Page({
    this.icon,
    this.text,
  });


//  //获取卡变标签颜色
//  Color get labelColor => color !=null ? color[300] : Colors.grey[300];
//  //获取浮动按钮定义是否为空
//  bool get fabDefined => color != null && icon !=null;
//  //获取浮动按钮的颜色
//  Color get fabColor => color[400];
//  //获取浮动按钮的图标
//  Icon get fabIcon => new Icon(icon);
//  //获取浮动按钮的键值
//  Key get fabKey => new ValueKey(fabColor);

}

//存储所有页面的列表
final List<_Page> _allPages =   <_Page>[
  new _Page(icon: Icons.event,text: 'EVENT'),
  new _Page(icon: Icons.home,text: 'HOME'),
  new _Page(icon: Icons.android,text: 'Android'),
  new _Page(icon: Icons.alarm,text: 'Alarm'),
  new _Page(icon: Icons.face,text: 'face'),
  new _Page(icon: Icons.language,text: 'LANGIAGE'),
];

class ScrollableTabsDemo extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _ScrollableTabsDemo();
  }
}

const String _exmplanatoryText="当Scaffold的浮动操作按钮改变时,新按钮消失并变成视图"
    "在这Demo中,改变选项卡会导致应用程序与浮动操作按钮重建"
    "Scaffold通过键值与其他区分";

//继承SingleTickerProviderStateMixin ，提供单个Ticker(每个动画调用它的回调一次)
class _ScrollableTabsDemo extends State<ScrollableTabsDemo> with SingleTickerProviderStateMixin{
  /**
   * 在TabBar和TabBarView之间的坐标选项卡选择
   * TabBar：质感设计控件，显示水平的一行选项卡
   * TabBarView：可分布列表，显示与当前所选标签对应的控件
   */
  TabController _controller;

  /**
   * 改变Tabs样式
   *  iconsAndText
   *  textOnly
   *  iconOnly
   */
  TabsDemoStyle _demoStyle=TabsDemoStyle.iconsAndText;



  @override
  void initState() {
    super.initState();
    ///创建一个对象，用于管理TabBar和  TabBarView所需的状态
    ///length:选项卡的总数
    _controller=new TabController(length: _allPages.length, vsync: this);
  }
  ///相当于生命周期中销毁的方法
  @override
  void dispose() {
    super.dispose();
    _controller.dispose();//释放资源
  }

  ///改变demo的style
  void changeDemoStyle(TabsDemoStyle style){
    setState(() {
      _demoStyle=style;
    });
  }
  @override
  Widget build(BuildContext context) {
    //获取当前主题的控件前景色
    final Color iconColor=Theme.of(context).accentColor;
    "当Scaffold的浮动操作按钮改变时,新按钮消失并变成视图"
        "在这Demo中,改变选项卡会导致应用程序与浮动操作按钮重建"
        "Scaffold通过键值与其他区分";
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('可滚动标签页'),
        actions: <Widget>[
          new PopupMenuButton(itemBuilder: (BuildContext context) => <PopupMenuItem<TabsDemoStyle>>[
              new PopupMenuItem(child: new Text('图标和文字'),
                value: TabsDemoStyle.iconsAndText,),
              new PopupMenuItem(child: new Text('图标'),
                value: TabsDemoStyle.iconOnly,),
              new PopupMenuItem(child: new Text('文字'),
                value: TabsDemoStyle.textOnly,),
          ])
        ],
        bottom: new TabBar(
            controller: _controller,//控件的选择和动画状态
            isScrollable: true,//标签是否可以水平滚动
            //标签控件的列表
            tabs: _allPages.map((_Page page){
              switch(_demoStyle){
                case TabsDemoStyle.iconsAndText:
                  return new Tab(text: page.text,icon: new Icon(page.icon));
                case TabsDemoStyle.iconOnly:
                  return new Tab(icon: new Icon(page.icon));
                case TabsDemoStyle.textOnly:
                  return new Tab(text: page.text);
              }
            }).toList()
        ),
      ),
      body: new TabBarView(
          controller: _controller,//控件的选择和动画状态
          children: _allPages.map((_Page page){
            return new Container(
              key: new ObjectKey(page.icon),
              padding: const EdgeInsets.all(12.0),
              //质感设计卡片
              child: new Card(
                child: new Icon(
                  page.icon,
                  color: iconColor,
                  size: 128.0,
                ),
              ),
            );

          }).toList()
      ),
    );
  }
}

效果：
在这里插入图片描述

切换页面更换颜色


const String _explanatoryText = "当Scaffold的浮动操作按钮改变时,新按钮消失并变成视图"
    "在这Demo中,改变选项卡会导致应用程序与浮动操作按钮重建"
    "Scaffold通过键值与其他区分";

class _Page {
  _Page({this.label, this.colors, this.icon});

  final String label;
  final MaterialColor colors;
  final IconData icon;

  Color get labelColor => colors != null ? colors[300] : Colors.grey[300];

  bool get fabDefined => colors != null && icon != null;

  Color get fabColor => colors[400];

  Icon get fabIcon => new Icon(icon);

  Key get fabKey => new ValueKey<Color>(fabColor);
}

//所有页面的列表
final List<_Page> _allPages = <_Page>[
  new _Page(label: '蓝色', colors: Colors.indigo, icon: Icons.add),
  new _Page(label: '绿色', colors: Colors.green, icon: Icons.create),
  new _Page(label: '空白'),
  new _Page(label: '蓝绿色', colors: Colors.teal, icon: Icons.add),
  new _Page(label: '红色', colors: Colors.red, icon: Icons.create),
];

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'CardDemo',
      theme: new ThemeData(primarySwatch: Colors.blue), //主题颜色
      home: new MyHomePage(
        title: 'Flutter Demo Home Page',
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin {
  //应用程序的唯一键值,Scaffold的状态
  final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();
  TabController _controller;

  //局部变量,选择页面
  _Page _selectedPage;

  @override
  void initState() {
    super.initState();
    _controller = new TabController(length: _allPages.length, vsync: this);
    _controller.addListener(_handleTabSelection);
    _selectedPage = _allPages[0];
  }

  @override
  void dispose() {
    super.dispose();
    _controller.dispose();
  }

  //处理选项卡的选择
  void _handleTabSelection() {
    setState(() {
      _selectedPage = _allPages[_controller.index]; //把选择的页面和controller的下标进行一一对应
    });
  }

  //显示说明文本函数
  void _showExplanatoryText() {
    //currentState:当前控件树种具有此键的控件的状态
    //showBottomSheet:显示持久的质感设计底部板块
    _scaffoldKey.currentState.showBottomSheet<Null>((BuildContext context) {
      return new Container(
        decoration: new BoxDecoration(
          //容器顶部的边界颜色为当前主题颜色
            border: new Border(
                top: new BorderSide(color: Theme.of(context).dividerColor))),
        child: new Padding(
          padding: const EdgeInsets.all(32.0),
          child: new Text(_explanatoryText),
        ),
      );
    });
  }

  Widget buildTabView(_Page _page) {
    //Builder:将其构建委托给回调的控件
    return new Builder(builder: (BuildContext context) {
      //调用获取控件
      return new Container(
        key: new ValueKey(_page.label),
        padding: const EdgeInsets.fromLTRB(48.0, 48.0, 48.0, 96.0),
        //创建质感设计卡片
        child: new Card(
          child: new Center(
            child: new Text(
              _page.label,
              style: new TextStyle(color: _page.labelColor, fontSize: 32.0),
            ),
          ),
        ),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: new AppBar(
        title: new Text(widget.title),
        //bottom:显示在应用栏底部的控件
        bottom: new TabBar(
            controller: _controller,
            tabs: _allPages.map((_Page page) {
              return new Tab(
                text: page.label,
              );
            }).toList()),
      ),
      floatingActionButton: !_selectedPage.fabDefined
          ? null
          : new FloatingActionButton(
        //点击显示文本
        onPressed: _showExplanatoryText,
        key: _selectedPage.fabKey,
        tooltip: '显示说明',
        backgroundColor: _selectedPage.fabColor,
        child: _selectedPage.fabIcon,
      ),
      body: new TabBarView(
        children: _allPages.map(buildTabView).toList(),
        controller: _controller,
      ),
    );
  }
}

效果：
在这里插入图片描述

底部面板

有状态

面板可拖动关闭，面板出现时左上角出现返回按钮，点击也可关闭面板
GlobalKey
ScaffoldState


class MyApp extends StatefulWidget{

  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return new _MyAppState();
  }

}
class _MyAppState extends State<MyApp>{
  // GlobalKey : 整个应用程序的唯一键
  //ScaffoldState：Scaffold框架的状态
  //_ScaffoldKey的值是Scaffold框架的唯一键
  final GlobalKey<ScaffoldState> _ScaffoldKey =new GlobalKey();
  //VoidCallBack：没有参数并且不返回数据的回调
  VoidCallback _showBottomSheetCallBack;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      key: _ScaffoldKey,
      appBar: new AppBar(
        title: new Text('底部面板'),
      ),
      floatingActionButton: new FloatingActionButton(
        onPressed: _showMessage,
        backgroundColor: Colors.redAccent[200],
        child: new Icon(Icons.add),),
      body: new Center(
        child: new RaisedButton(
          onPressed: _showBottomSheetCallBack,
          child: new Text('显示底部面板'),),
      ),
    );
  }

  @override
  void initState() {
    super.initState();
    _showBottomSheetCallBack=_showBottomSheet;
  }
  void _showBottomSheet(){
    setState(() {
      //禁用按钮
      _showBottomSheetCallBack=null;
    });
    //currentState：获取具有此全局键的树中的控件状态
    //showBottomSheet：显示持久性的底部面板
    //联系上文，_scaffoldKey是Scaffold框架状态的唯一键，此代码在Scaffold框架中显示出就行的底部面板
    _ScaffoldKey.currentState.showBottomSheet((BuildContext context){
      final ThemeData themeData = Theme.of(context);
      return new Container(
        decoration: new BoxDecoration(
          border: new Border(
            top: new BorderSide(color: themeData.disabledColor)
          )
        ),
        child: new Padding(
          padding: const EdgeInsets.all(32.0),
          child: new Text('这是一个持久性的底部面板，向下拖动即可关闭',
          textAlign: TextAlign.center,
          style: new TextStyle(color: themeData.accentColor,fontSize: 24.0),),),
      );
    })
    //closed 当此对象控制的元素不再可见时
    //whenComplete ： 注册将在此完成时调用的函数
        .closed
        .whenComplete((){
          //mounted:bool值，这个state对象当前是否在树（控件树）中
          if(mounted){
            setState(() {
              //重新启动按钮
              _showBottomSheetCallBack=_showBottomSheet;
            });
          }
        });
  }

  void _showMessage(){
    //showDislog<T>:显示应用程序当前内容上方的对话框
    showDialog(context: context,child: new AlertDialog(
      content: new Text('点击了浮动按钮'),
      actions: <Widget>[
        new FlatButton(child: new Text('确定'),onPressed: (){
          Navigator.pop(context);
        })
      ],
    ));
  }
}

效果：
在这里插入图片描述

无状态


class BottomDemo extends StatelessWidget{

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('无状态底部面板'),
      ),
      body: new Center(
        child: new RaisedButton(
            child: new Text('显示底部面板'),
            onPressed: (){
              //showModalBottomSheet:显示无状态底部面板
              showModalBottomSheet(context: context, builder: (BuildContext context){
                return new Container(
                  child: new Padding(
                      padding: const EdgeInsets.all(32.0),
                    child: new Text('无状态底部面板，点击关闭',
                    textAlign: TextAlign.center,
                        style: new TextStyle(color: Theme.of(context).accentColor,fontSize: 24.0),),
                  ),
                );
              });
        }),
      ),
    );
  }
}

效果：
在这里插入图片描述

表单 Form TextFormField

class _MyAppState extends State<MyApp>{
  String _lastName;
  String _firstName;
  String _phone;
  GlobalKey<FormState> _fromKey=new GlobalKey();
  
  void _showMessage(String name){
    showDialog(context: context,
    child: new AlertDialog(
      content: new Text(name),
      actions: <Widget>[
        new FlatButton(
            onPressed: (){
              Navigator.pop(context);
            }, 
            child: new Text('确定'))
      ],
    ));
  }
  
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('表单输入'),
      ),
      body: new Form(
        key: _fromKey,
          child: new Column(
            children: <Widget>[
              new TextFormField(
                //包含输入的表单控件，每个表单字段都应该在Form中
                decoration: new InputDecoration(
                  labelText: '姓氏'
                ),
                onSaved: (String value){
                  _lastName=value;
                },),
              new TextFormField(
                //控制长度
                maxLength: 4,
                //光标颜色
                cursorColor: Colors.redAccent,
                cursorWidth: 16.0,
                cursorRadius: Radius.circular(16.0),
                decoration: new InputDecoration(
                  //标题
                  labelText: '名字',
                  //提示文字
                  hintText: '请输入名字',
                  //左侧图标
                  icon: new Icon(Icons.text_format),
				//右侧图标
                  suffixIcon: new Icon(Icons.title)
                ),
                onSaved: (String value){
                  _firstName=value;
                },),
              new Row(
                children: <Widget>[
                  new RaisedButton(
                    child: new Text('重置'),
                      onPressed: (){
                        //将Form表单下的每个TextField重置为初始状态
                        _fromKey.currentState.reset();
                        _showMessage('已重置');
                      }),
                  new RaisedButton(
                    child: new Text('提交'),
                      onPressed: (){
                        _fromKey.currentState.save();
                        _showMessage('你的姓名是' + _lastName + _firstName);
                      })
                ],
              ),
              new TextFormField(
                decoration: new InputDecoration(
                  border: new OutlineInputBorder(),
                  hintText: '请输入电话',
                  labelText: '电话',
                  //图标
                  icon: new Icon(Icons.phone),
                ),
                //键盘属性
                keyboardType: TextInputType.number,
                onSaved: (String value){
                  _phone=value;
                },
                //正在编辑的文本更改时
                onChanged: (String phone){
                  setState(() {
                    _phone=phone;
                  });
                },
              )
            ],
          ),
      ),
    );
  }

效果：
在这里插入图片描述

效果控件 InkWell

在这里插入图片描述

AutomaticKeepAliveClientMixin 保持页面状态

AutomaticKeepAliveClientMixin 保持页面状态不被销毁重建，但是会占用内存

注意事项：

  1. 使用的页面必须是继承 StatefulWidget，如果是 StatelessWidget 是没办法办法使用的。
  2. 需要两个变量 PageView 和 IndexedStack。
  3. wantKeepAlive 方法必须重写。

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}
/**
 * AutomaticKeepAliveClientMixin 保持页面状态不被销毁重建，但是会占用内存
 * wantKeepAlive方法必须重写
 */
class _IndexPageState extends State<IndexPage> with AutomaticKeepAliveClientMixin{

  PageController _pageController;

  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.tags), title: Text('分类')),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.profile_circled), title: Text('会员中心')),
  ];

  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];
  //点击的下标
  int currentIndex = 0;
  //点击的页面
  var currentPage;

  @override
  void initState() {
    currentPage = tabBodies[currentIndex];
    _pageController = new PageController()
    ..addListener((){
      if(currentPage != _pageController.page.round()){
        setState(() {
          currentPage = _pageController.page.round();
        });
      }
    });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomTabs,
        onTap: (index) {
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];
          });
        },
      ),
      //保存当前页面 ，不用初始化
      body: IndexedStack(
        index: currentIndex,
        children: <Widget>[
          HomePage(),
          CategoryPage(),
          CartPage(),
          MemberPage()
        ],
      ),
    );
  }

  @override
  // TODO: implement wantKeepAlive
  bool get wantKeepAlive => true;//是否保持当前状态
}
yuuuuuuii
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
LeetCode经典算法题 no.69 x的平方根
qq_61727355的博客
07-13 269
题目：x的平方根题目描述：实例展示：思路分析：本题要求：在不使用开根号函数（Math.sqrt()）的情况下，得到 x的平方根的整数部分若使用Math.sqrt():【此解法不符合题意，只起补充作用】 本题可采用二分查找方法，其中对于0和1两种特殊情况需要单独拿出来写设上届为x，用符号max表示；下届为0，用符号min表示；中间值为mid代码展示：...
WIFI万能钥匙协议分析
zhangmiaoping23的专栏
07-25 6953
转：https://my.oschina.net/auo/blog/338168 WIFI万能钥匙协议分析 作者：enimey 时间：2014.10.28 0x0 前段时间实验室需求，分析过WIFI万能钥匙的原理，现在空了写个博客记录下。 版本：2.9.38（不是最新版） 操作系统：Android 0x1 通过真实使用该软件后，可以得到一个初步的猜测，点击一键
Ultimate 97 con M_www.542www.con_www.2633.con_www.97h.con_Free!_
10-03
Munonlineeeeeee free
html结构及部分属性——从0开始
HZBCc的博客
04-03 2万+
<!--html负责网页的结构，使用html标``签时，应关注标签的语义而不是样式--> <!doctype html> <!--声明网页版本是html5--> <html> <head> <title>html的网页</title> <!--title的内容会会作为搜索结果的超链接上的文字显示--> <meta charset="utf-8"&
2D-Rogoulike
qq_34343249的博客
03-31 359
加载图片到Unity后，最好先设置要发布的平台，如果你的项目很大，到最后再换平台就会花费大量的时间 所以在开始就应该设计好 创建Player和Enemy 的预制体 使用 Animator override controller ， 这个组件可是是不同的人物使用相同的动画控制器 对 Enemy1动画控制器右键，然后选择 Animator override Controller, 再选择重写的动画 ...
flutter初学者教程 flutter路由-入门代码
12-01
flutter路由及传参参看博客 https://blog.csdn.net/qq_18454025/article/details/121631994
flutter-references:Flutter初学者参考资料，例如指南，网站，软件包等
03-21
Flutter学习资料和有用的参考资料网站/回购/教程：|有助于在首次使用时显示应用程序功能 |自定义图标生成器|格式化日期，例如“几分钟前”，“昨天”等。 | Dart和Flutter的有用文章和教程|精心设计的项目可供学习 |...
flutter快速学习项目源码、快速集成企业ERP、OA等信息。flutter初学快速入门、flutter毕业设计，
12-21
flutter初学快速入门、flutter毕业设计， mvp模式 使用provider (6.x 版本)做状态管理 基于dio （4.x 版本）的网络请求封装 完整的集成测试、可访问性测试。 支持深色模式 本地化（感谢 @ghedwards） 使用Sliver ...
FlutterBeginner:Epitech项目FLutter初学者I的存储库
03-21
Flutter初学者Epitech项目FLutter初学者I的存储库
Flutter---World-Time-Application:Flutter初学者教程＃22
03-26
worldtimeapp 一个新的Flutter项目。入门该项目是Flutter应用程序的起点。 如果这是您的第一个Flutter项目，那么有一些资源可以帮助您入门：要获得Flutter入门方面的帮助，请查看我们的，其中提供了教程，示例，有关...
回文数c语言程序编写mooc,C语言程序设计-中国大学mooc-张亚玲
weixin_42591413的博客
05-18 1408
1、一个C程序可能出现的错误有A、语法错误B、逻辑错误C、运行错误D、以上都包括答案：D2、C程序中一般可以包含几个函数A、只有1个B、必须多于2个C、0个D、至少1个答案：D3、C语言属于程序设计语言的哪个类别A、高级语言B、汇编语言C、机器语言D、面向对象语言答案：A4、以下关于C语言描述错误的是A、一个C程序总是从main函数开始执行B、一个C程序可以包含多个main函数C、每个语句的最后必...
flutter实现异步UI
weixin_40763897的博客
08-23 2387
小型应用基本难不倒MySQL数据库，一来访问量少，二来数据不多。但是企业级的应用，访问量大，更要命的是它的数据量大。比如一个应用可能也就两三千人使用，即使用它们同时并发访问，我想 ...
＜Zhuuu_ZZ＞Spark(六)之SparkSQL&DataFrame&DataSet
Zhuuu_ZZ的博客
11-18 541
Spark SQL及与Hive的集成一 Spark SQL架构二 运行原理之Catalyst优化器1、运行逻辑2、逻辑计划3、优化4、物理计划三 Spark SQL API1、SparkSession2、Dataset3、使用Case Class创建Dataset4、RDD->Dataset5、DataFrame什么是DataFrameDataFrame API常用操作 一 Spark SQL架构 Spark SQL是Spark的核心组件之一（Spark Core、Spark SQL、Spark S
91.vido.ws v.php,"token" parameter not in video info for unknown reason;
热门推荐
weixin_35307279的博客
03-29 82万+
youtube-dl -v --dump-pages https://www.youtube.com/watch?v=USg3NR76XpQ output[debug] System config: [][debug] User config: [u'--add-metadata', u'--user-agent', u'Mozilla/5.0 (X11; Ubuntu; Linux x86_64...
linux_修改ip(重启后永久生效)
LXYuuuuu的博客
09-13 6784
vi /etc/sysconfig/network-scripts/ifcfg-eth0 DEVICE=eth0 TYPE=Ethernet UUID=a20869f2-4095-4e5d-9b0c-9a5aa7b8b750 ONBOOT=yes 开机启动 NM_CONTROLLED=yes BOOTPROTO=none ip方式：dhcp static none HWADDR=...
进军Json，以战养战 -- 爬取搜狗图片代码分析
weixin_43482414的博客
06-03 578
爬取搜狗图片代码分析代码代码功能代码代码解析总结 代码 代码功能 从搜狗网页下载 n 张指定分类的图片并保存到指定的文件夹。 代码 # 导入相关的库 import requests import json import urllib import os # 爬取图片的保存路径 output_dir = "./images/" # 爬取搜狗搜图的函数 def getSogouImag(category, length, path): ''' 参数category：指要爬取图片的类型，字符
Picasso之图片缓存机制<二>ListView篇
qq_15950325的博客
10-15 8228
前面已经个大家介绍Picasso图片缓存机制，大家不熟悉请看上一篇文章http://blog.csdn.net/qq_15950325/article/details/52809380，其实Picasso优点首先是占用内存小，代码效率高相比较于Volley异步框架而言，它而且支持本地缓存，而Volley不可以。listview分为以下几步 1.下载jar参考上一篇文章点击这里首先创建Picass
kotlin设置按钮不可点击_Kotlin协程的实践一
weixin_39606799的博客
11-20 573
可以看到功能其实很简单，界面由一个按钮和三个图片组成。每次按下刷新按钮，就都会从网络上获取三张图片显示到界面上。从网络上获取图片的时候刷新按钮变为不可用状态，刷新完成后按钮恢复可用状态。1. 添加依赖//添加Retrofit网络库和gsonConverter的依赖，注意一定要2.6.0版本以上 implementation 'com.squareup.retrofit2:retrofit:2.7....
Flutter 学习笔记(适合初学者教程 - 持续更新)
H.A.N的博客
07-30 2398
前言   Dart 作为开发 Flutter 应用的基础语言，对于开发 Flutter 应用你必须要学习 Dart 语言。其实，个人认为高级语言基本上都是大同小异，90% 是想通的，只有 10% 是此种语言的特性，需要重点学习。我个人认为，只要你有一门高级语言的基础，学习 Dart 语言其实是不难的。习惯上和思想上多注意一点就 ok 了。
flutter api文档
最新发布
06-24
Flutter API文档的优点在于提供了高质量的资料和示例，非常适合给Flutter初学者使用。此外，与其他API文档相比，Flutter API文档有一个社区版本，让开发者可以共同协作编辑和完善，提高了文档的质量和实用性。 总之...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值