0.Flutter学习笔记以及问题记录

Flutter学习笔记

新建项目

**1、Flutter create xxxx ** 先用命令建好项目再到工具内，打开项目。这样比较快

声明：Flutter专栏文档均来自慕课网
https://coding.imooc.com/class/321.html

.基础结构

// 引入基础样式 material
import 'package:flutter/material.dart';

// 入口文件
void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // 重写方法
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Welcome to Flutter",
      // 脚手架组件 具体点击进入看源码
      home: Scaffold(
        // 属性是小写，有哪些属性，在源码中可以清楚的看见，引入的对象是大写 AppBar
        appBar: AppBar(
          title: Text("Hello World 你好"),
        ),
        // 内容
        body: Center(
          // 用容器来存放子项
          child: Container(
            // 容器内 添加一个 Text
            child: new Text("这个是内容啊啊啊啊",
              style: TextStyle(
                  fontSize: 20,
                  color: Colors.white
              ),
            ),
            // 设置容器padding
            padding: EdgeInsets.fromLTRB(20.0, 20.0, 20.0, 30.0),
            // 设置容器内对其方式
            alignment: Alignment.topLeft,
            // 设置容器margin
            margin: EdgeInsets.fromLTRB(20, 20, 20, 30),
            width: 400,
            height: 300,
            // 设置容器叠加背景
            decoration: BoxDecoration(
                // 这里用线性渐变
                gradient:LinearGradient(
                    colors: <Color>[Colors.blueGrey,Colors.white]
                )
            ),
          ),
        ),
      ),
    );
  }
}

横向ListView 与Listview代码抽离

// 引入material UI
import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 返回Material风格的App
    return new MaterialApp(
      title: "list demo测试",
      // 页面脚手架
      home: Scaffold(
        // 标题栏
        appBar: AppBar(
          // title
          title: new Text("list view 测试"),
          // 标题栏背景
          backgroundColor: Colors.blueGrey,
        ),
        // 内容模块 ->这里设置居中
        body: Center(
            // 内容设置一个容器，高度为200，容器内 填充内容 为 listview
            child: Container(
              height: 200,
              // 将listview控件抽离出去 并传递默认宽度
              child: new MyList(300.0),
        )),
      ),
    );
  }
}

// Listview 抽离
class MyList extends StatelessWidget {
  double width = 200;

  MyList(double w){
    this.width = w;
  }

  @override
  Widget build(BuildContext context) {
    return new ListView(
      scrollDirection: Axis.horizontal,
      children: <Widget>[
        new Container(
          width: this.width,
          color: Colors.deepOrange,
        ),
        new Container(
          width: this.width,
          color: Colors.blueGrey,
        ),
        new Container(
          width: this.width,
          color: Colors.lightBlue,
        ),
        new Container(
          width: this.width,
          color: Colors.green,
        ),
        new Container(
          width: this.width,
          color: Colors.yellowAccent,
        ),
      ],
    );
  }
}

ListView动态填充数据

// 引入material UI
import 'package:flutter/material.dart';

void main() => runApp(MyApp(
    dataList: new List<String>.generate(1000, (i) => "Item $i")
));

class MyApp extends StatelessWidget {
  List<String> dataList;

  MyApp({Key key,this.dataList}):super(key:key);

  @override
  Widget build(BuildContext context) {
    // 返回Material风格的App
    return new MaterialApp(
      title: "list demo测试",
      // 页面脚手架
      home: Scaffold(
        // 标题栏
        appBar: AppBar(
          // title
          title: new Text("list view 测试"),
          // 标题栏背景
          backgroundColor: Colors.blueGrey,
        ),
        // 内容模块 ->这里设置居中
        body: new MyList(dataList),
      ),
    );
  }
}

// Listview 抽离
class MyList extends StatelessWidget {
  List<String> dataList = new List();
  MyList(List<String> items){
    this.dataList = items;
  }

  @override
  Widget build(BuildContext context) {
    return new ListView.builder(
        itemCount: dataList.length,
        itemBuilder: (BuildContext context, int index) {
          return new ListTile(
            title: new Text('Item $index'),
          );
        },
    );
  }
}

GridView demo

import 'package:flutter/material.dart';
// 初始化一个图片数组，模拟数据传递
var picArr = [
'http://222.186.12.239:10010/wde_150708/004.jpg',
'http://222.186.12.239:10010/suop_150709/001.jpg',
'http://222.186.12.239:10010/suop_150709/003.jpg',
];

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  List<String> picList=new List<String>();
  MyApp(){
    // 循环将数组图片插入到 list
    for(var pic in picArr){
      picList.add(pic);
    }
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "电影海报 实例",
      home: Scaffold(
        appBar: AppBar(title: new Text("电影海报实例")),
        // 将数据 传递给 独立 控件 MyGridView
        body: MyGridView(picList),
      ),
    );
  }
}

// 抽离控件GridView ，获取传递的数据
class MyGridView extends StatelessWidget{
  List picList = new List();
  MyGridView(List items){
    this.picList = items;
  }
  @override
  Widget build(BuildContext context) {
    return new GridView.builder(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        // 一行3列
        crossAxisCount: 3,
        // 上下 间距
        mainAxisSpacing: 2.0,
        // 左右间距
        crossAxisSpacing: 2.0,
        // 图片长宽比
        childAspectRatio: 0.7,
      ),
      itemBuilder: (BuildContext context, int index) {
        return new Image.network(picList[index],fit: BoxFit.cover,);
      },
      itemCount: picList.length,
    );
  }
  
}

遇到的奇葩问题1：

org-dartlang-debug:synthetic_debug_expression:1:1: Error: String starting with ' must end with '.

'Unable to load asset: $key

解决办法：

--flutter clean

遇到的奇葩问题2：

Another exception was thrown: Exception: HTTP request failed, statusCode: 403

定位后发现，是后台接口token校验问题，

遇到的奇葩问题3

android 运行一直卡住无法安装

解决办法

修改build.gradle，把里面的google()、jcenter()注释掉，因为要访问外网，改成aliyun代理网址

maven {
    url 'https://maven.aliyun.com/repository/google/'
}
maven{
    url 'https://maven.aliyun.com/repository/jcenter/'
}
maven{
    url 'https://maven.aliyun.com/nexus/content/groups/public'
}

然后，还有把gradle-wrapper.properties文件内gradle-4.10.x-all.zip 改成本地有的版本（必须是4.6 or 更新版）

#Fri Jun 23 08:50:38 CEST 2017
distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.10.1-all.zip

自定义控件 + 传参定义

// Flutter
class CustomCard extends StatelessWidget {
  CustomCard({@required this.index, @required
  this.onPress});

  final index;
  final Function onPress;

  @override
  Widget build(BuildContext context) {
    return Card(
        child: Column(
          children: <Widget>[
            Text('Card $index'),
            FlatButton(
              child: const Text('Press'),
              onPressed: this.onPress,
            ),
          ],
        )
    );
  }
}
...
// Usage
CustomCard(
index: index,
onPress: () {
print('Card $index');
},
)
...

遇到的奇葩问题4

Waiting for another flutter command to release the startup lock…

https://github.com/flutter/flutter/issues/17422

On OSX:
rm /Applications/flutter/bin/cache/lockfile

Waiting for another flutter command to release the startup lock…

flutter packages get --verbose

遇到的奇葩问题页面路由跳转

Navigator operation requested with a context that does not include a Navigator.

The context used to push or pop routes from the Navigator must be that of a widget that is a descendant of a Navigator widget.

直接在MyApp中push是不行的。启动的时候要包一层

参照链接

[图片上传失败...(image-4b8271-1554889682077)]

最后编辑于：2019.07.15 18:30:39

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 216,258评论 6赞 498
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 92,335评论 3赞 392
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 162,225评论 0赞 353
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 58,126评论 1赞 292
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 67,140评论 6赞 388
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 51,098评论 1赞 295
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 40,018评论 3赞 417
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 38,857评论 0赞 273
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 45,298评论 1赞 310
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 37,518评论 2赞 332
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 39,678评论 1赞 348
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 35,400评论 5赞 343
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 40,993评论 3赞 325
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 31,638评论 0赞 22
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 32,801评论 1赞 268
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 47,661评论 2赞 368
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 44,558评论 2赞 352

0.Flutter学习笔记以及问题记录

Flutter学习笔记

新建项目

Flutter原理介绍（讲的比较透彻和全面的文章）

（免费视频）Dart编程语言基础学习

（免费视频）Flutter 入门与实战-基础视频学习

Flutter 从入门到进阶-demo

Flutter 增加Json 序列化反序列化

Json转Dart 在线工具