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

作者: 全栈小土堆堆堆 | 来源:发表于2019-04-10 17:48 被阅读2400次

Flutter学习笔记

新建项目

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

.基础结构

// 引入基础样式 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)]

网友评论

Flutter

本文标题：0.Flutter学习笔记以及问题记录

本文链接：https://www.haomeiwen.com/subject/aluoiqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

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

Flutter学习笔记

新建项目

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

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

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

Flutter 从入门到进阶-demo

Flutter 增加Json 序列化反序列化

Json转Dart 在线工具

.基础结构

横向ListView 与Listview代码抽离

ListView动态填充数据

GridView demo

遇到的奇葩问题2：

遇到的奇葩问题4

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

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

Flutter学习笔记

新建项目

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

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

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

Flutter 从入门到进阶-demo

Flutter 增加Json 序列化反序列化

Json转Dart 在线工具

.基础结构

横向ListView 与Listview代码抽离

ListView动态填充数据

GridView demo

遇到的奇葩问题2：

遇到的奇葩问题4

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

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Flutter

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