Flutter学习笔记（持续更新~纯小白~大佬请避让）

dart语言学习：

 1.必须存在的main函数

void main{
print("hello world");
}

2.声明变量

2.1 var

var a=111；
var str="12345"；
int str=12345；
string str=12345；
var title="你好"；

更改值：

void main()
{
var title=‘你好’；
title=‘我不好’；
print(title);
}

这时输出的值变为 我不好

说明var声明的变量可以更改

2.2 final变量

final title=‘你好’
title='我不好'

这时报错

说明final声明的变量不可以更改

但如果声明的是一个对象，可以更改其属性中的值

（只限制分配这一个动作而不限制变量参数本身）

 2.2const变量声明后不管是什么都不能改

-----分割线

时隔10天没学flutter了www，今天跟着b站上的视频学了上手实战了，个人的感觉是一定要上手，之前对着flutter的书本看了很久都没看出个所以然，今天跟着动手学感觉收获颇多~以下都是b站视频的学习笔记，纯小白~大佬请避让

import 'package:flutter/material.dart';

之前看见这句话感觉很懵逼，不明白莫名其妙导入一个这样的东西有什么作用，莫非和c语言中#include <stdio.h>”类似？！好像确实是这样的。

这句话就是导入相关的组件包

由于博主是第一次接触前端的内容，以下是博主自己的一些理解：

flutter框架相当于给你提供了一个房子的框架，会提供像脚手架scafford又或者是各样的组件，就如同搭建房子的各种工具和脚手架一样，你可以自定义你的房子里面有什么元素有什么东西去布置渲染。

//导入控件
void main() => runApp(MyApp());

这个是每个flutter应用程序必有的runApp，app的启动代码

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //build用来渲染
    return MaterialApp(
      //每个项目必须有的
      title: 'flutter 1 project',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Myhome(),
    );
  }
}

以这里为例子，应用了StatelessWidget这一个无状态控件

有状态控件Statefulwidget

引用自《flutter完全手册》的话：

StatelessWidget 是没有 State （状态）的 Widget ，当 Widget 在运⾏时不需要改变时，就⽤ StatelessWidget 。

1.  build—— 它是用来创建 Widget --->⽤于显示 UI 。

2.return MaterialAPP  是每个项目都要有的 

上面的代码段中调用的Myhome()

class Myhome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //在flutter中，每一个控件都是一个类
    return DefaultTabController(
      length: 3,
      child: 

 return DefaultTabController

下面将进入Scafford这一个概念：

 Scaffold 实现了 基本布局结构，例如 AppBar、Drawer、SnackBar 等，所以为了使用这些布局，也必须要使用 Scaffold。flutter一个基本框架：Root Widget 是 MaterialApp ，然后 MaterialApp 的 子Widget 就是 Scaffold，然后我们在 Scaffolfd 的 子Widget 里写UI。

 child: Scaffold(
          appBar: AppBar(
            title: Text('电影列表'),
            centerTitle: true,
            actions: [IconButton(onPressed: () {}, icon: Icon(Icons.search))],
          ),
          drawer: Drawer(

IconButton(onPressed: () {}, icon: Icon(Icons.search）

这个就是图标中的点击和查询 用到了Icon这一个组件

下面介绍

加载图片的方式：

      home: Scaffold(
        appBar: AppBar(title: Text("Flutter UI基础Widget -- 图片和Icon")),
        body: Image.network("https://。。。。。。。。.jpg"),
      ),

network是在网络上搜素显示的照片

以下还有几种方式

---> Image.file(file)：从本地文件加载显示图片

 这里需要传入图片的本地地址

----> Image.asset(name)：从Flutter APP的资源文件里加载显示图片

 这里需要传入Flutter APP图片资源文件的路径及图片名字

------>Image.memory(bytes)：从内存加载显示图片

 drawer: Drawer(
            child: ListView(
              children: [
                UserAccountsDrawerHeader(
                  accountName: Text('lll'),
                  accountEmail: Text('abc@232.cn'),
                  currentAccountPicture:
                      CircleAvatar(backgroundImage: NetworkImage('')),
                ),

左侧的菜单栏写法类似这样

           ListTile(
                  title: Text('反馈'),
                  trailing: Icon(Icons.feedback),
                ),
                ListTile(
                  title: Text('系统设置'),
                  trailing: Icon(Icons.settings),
                ),
                Divider(),
                ListTile(
                  title: Text('发布'),
                  trailing: Icon(Icons.send),
                ),
                ListTile(
                  title: Text('注销'),
                  trailing: Icon(Icons.exit_to_app),
                ),

里面的Divider其实就是画一条分割线

（明天继续更新.....太困了写不下去了www）

------------------------------分割线

更新：

首先填个坑：

Flutter写UI的形式是与Android和IOS的写法有所不同，它使用了声明式的方法来写，类似于似于 Android 的 XML？！

大概长这样，一行行往下写声明

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //build用来渲染
    return MaterialApp(
      //每个项目必须有的
      title: 'flutter 1 project',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Myhome(),
    );
  }
}

区别于命令式（该代码来源于《Flutter完全手册》）

ViewA a = new ViewA(...)
ViewB b = new ViewB(...)
ViewC c1 = new ViewC(...)
ViewC c2 = New ViewC(...)
// 然后将子view 添加到容器中
a.add(b)
b.add(c1)
b.add(c2)

命令式个人感觉有点类似于各种语言里面的赋值？、?

再补个坑：关于widget

StatefulWidget为什么称为有状态的，为啥能改变UI的状态，原因如下：

有两部分组成：

1. Widget
2. State

所以Flutter把可以变化的部分都存在State中，当State发生一定的变化的时候，会使用build将Widget重新构造，使得Widget发生了变化，更新UI的状态

所以选择使用StatefulWidget还是StatelessWidget 只需要考虑UI是否改变，改变用StatefulWidget不改变用StatelessWidget 即可。

 

接下来讲解底部的按钮区域

 bottomNavigationBar: Container(
            decoration: BoxDecoration(color: Colors.black),
            height: 50,
            child: TabBar(
              labelStyle: TextStyle(height: 0, fontSize: 10),
              tabs: [
                Tab(
                  icon: Icon(Icons.movie_filter),
                  text: '正在热映',
                ),
                Tab(
                  icon: Icon(Icons.movie_filter),
                  text: '即将上映',
                ),
                Tab(
                  icon: Icon(Icons.movie_filter),
                  text: 'TOP',
                )
              ],
            ),
          ),

labelStyle: TextStyle(height: 0, fontSize: 10),其中这一行让height：0的原因是这样Icon就不占高度

所以不会出现text压缩成一坨的情况

接下来讲解数据请求的实现：讲解的是Dio包数据请求的方式

首先要进入到工程的pubspec.yaml文件，找到depencies处，加入这一行，按下ctrl+s保存后它会自动下载

dio: '^5.5.0+1'

（可能以后会有新的版本就不是这一句了，跟着自己VScode报错复制粘贴就行）

在新建的.dart中要加入这一行

import 'package:dio/dio.dart';

Dio dio = new Dio();

class Movielist extends StatefulWidget {
  Movielist({Key? key, this.mt = "defalut"}) : super(key: key);
  final String mt;

  @override
  MovieListState createState() {
    return new MovieListState();
  }
}

get请求使用的方法：

var response = await dio.get(
     'https:。。。。。。${widget.mt}?start=$offset&count=$pagesize');

offset是偏移量【计算公式：（page-1）*pagesize】，即从第几个索引开始。

count是表示每一行显示多少条数。

这个要装在     。。。。async { }中

async 是异步函数，该函数使得Dart 可以用同步代码的方式来写异步代码，不需要使用 Future API

await会阻塞当前的操作，等待有结果的返回才执行下一步的操作。

getMovieList() async {
    int offset = (page - 1) * pagesize;

    //偏移量计算公式：(page-1)*pagesize
    var response = await dio.get(
        'https://www.。。。。。/api/v2/movie/${widget.mt}?start=$offset&count=$pagesize');
    var result = response.data;
    print(result);

通过dio获取到的数据：

只要要为私有数据赋值，都需要把赋值的操作放到setState的函数里面， 通过dio返回的数据必须用 [ ] 访问

setState(() {
      //通过dio返回的数据必须用[]访问
      mlist = result['subjects'];
      total = result['total'];
    });