Flutterr入门笔记

最新推荐文章于 2023-08-19 17:31:22 发布

氦客

最新推荐文章于 2023-08-19 17:31:22 发布

阅读量536

点赞数

分类专栏：跨平台移动开发文章标签： Flutter

本文链接：https://blog.csdn.net/EthanCo/article/details/91525289

版权

跨平台移动开发专栏收录该内容

21 篇文章 1 订阅

订阅专栏

MaterialApp和Scaffold

MaterialApp是我们使用 Flutter开发中最常用的符合Material Design设计理念的入口Widget。你可以将它类比成为网页中的<html></html>，且它自带路由、主题色，<title>等功能。

Scaffold通常被用作MaterialApp的子Widget，它会填充可用空间，占据整个窗口或设备屏幕。Scaffold提供了大多数应用程序都应该具备的功能，例如顶部的appBar，底部的bottomNavigationBar，隐藏的侧边栏drawer等。
一般来说在最外层，都要包一层Scaffold，让页面更好看。

添加Ignore文件

详见Flutter ignore文件

添加第三方库

打开pubspec.yaml
在dependencies下增加
比如，我们增加一个dio网络请求库

注意 ":" 后面有一个空格

在这里插入图片描述

Flutter弹出Toast

在 pubspec.yaml 的 dependencies 节点中，新增插件如下：

dependencies:
  toast: ^0.1.3

在 lib/main.dart 中导入对应的插件：

import 'package:toast/toast.dart';

调用 Toast.show() 函数提示消息：

// 参数1：提示消息
// 参数2：提示消息多久后自动隐藏
// 参数3：位置
Toast.show("鉴权失败！", context, duration: Toast.LENGTH_LONG, gravity: Toast.CENTER);

使用路由进行页面间跳转

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    title: '导航演示1',
    home: new FirstScreen(),
    routes: <String, WidgetBuilder>{
      '/second': (BuildContext context) => new SecondScreen(),
    },
  ));
}

class FirstScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text('导航页面')),
        body: Center(
            child: RaisedButton(
              child: Text('查看商品详情页面'),
              onPressed: () {
                /*Navigator.push(context,new  MaterialPageRoute(
                    builder:(context) =>new SecondScreen())
                );*/
                Navigator.pushNamed(context, "/second");
              },
            )
        )
    );
  }
}

class SecondScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: Text('技术胖商品详情页')),
        body: Center(child: RaisedButton(
            child: RaisedButton(
              child: Text('返回'),
              onPressed: () {
                Navigator.pop(context);
              },
            )
        ))
    );
  }
}

定义了home之后，路由之中不能再定义 “/”

HTTP网络请求

Flutter有个HTTP库，但是功能比较弱，官方推荐使用dio，详见 https://github.com/flutterchina/dio

StatelessWidget和StatefulWidget

StatelessWidget 是无状态控件，没有自己的私有数据，是纯展示型的控件
StatefulWidget 是有状态控件，拥有自己的私有数据和业务逻辑

查看和切换Flutter Channel

Flutter一般有4个Channel，从不稳定到稳定Channel如下，一般使用stable即可
master:最新代码
dev:从master中经过全面测试的最新版
beta:从dev中抽取上个月比较好的特性，进行外灰测试
stable:从beta分支中，合并外灰测试后的，稳定版

查看当前Flutter版本及Channel
在这里插入图片描述
查看Channel

切换Channel

flutter channel stable //切换到指定channel
flutter upgrade //将channel的代码更新到最新

Json解析

小型项目: 手动序列号
大型项目: 借助插件生成 json_serializable 和 built_value

其实大型项目使用手动+借助下面提到的在线转换的方式更加灵活高效

详见 https://flutterchina.club/json/

本地存储操作

google官方推荐我们使用shared_preferences进行本地存储。
shared_preferences是Flutter社区开发的一个本地数据存储的插件

简单的，异步的，持续化的key-value存储系统
在Android上它是基于SharedPreferences
在IOS上它是基于NSUserDefaults的

存储数据

final prefs = await SharedPreferences.getInstance();
//set value
prefs.setInt("counter",counter);

读取数据

final prefs = await SharedPreferences.getInstance();
final counter = prefs.getInt("counter" ?? 0;)

删除数据

final prefs = await SharedPreferences.getInstance();
prefs.remove("counter");

List列表

基于ListView水平和垂直方式滚动的列表
基于ExpansionTile实现可展开的列表
基于GridView实现网格布局
列表下拉刷新与上拉加载更多功能实现
flutter中ListView、ExpansionTile和GridView的学习

氦客

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录