Dart&Flutter基础学习日记

最新推荐文章于 2023-03-29 15:56:25 发布

墨痕留绝

最新推荐文章于 2023-03-29 15:56:25 发布

阅读量950

点赞数

分类专栏：前端文章标签： flutter 学习

本文链接：https://blog.csdn.net/qq_31539817/article/details/124692885

版权

前端专栏收录该内容

11 篇文章 3 订阅

订阅专栏

Dart语法

每段语气都需要逗号隔开

定义变量

Dart用两种定义变量的方式，第一种明确变量类型定义，第二种通过推导类型定义
通过数据类型定义变量，dart的数据类型有：
数字（int/double），字符串(String)，布尔(Boolean)，列表，集合(Set)，映射(Map)，符文。

一：使用变量类型定义

入口函数main

void main(List<String> args) {
  int firstFlutterCode = 12;
  print(firstFlutterCode);
}

二：类型推导定义

声明变量关键词：var、final、const

final：用于定义常量，可以通过计算或者函数进行赋值

const：用于什么常量，必须赋值，且值必须在编写时就确定，不可通过函数结果或者计算结果赋值

void main(List<String> args) {
  int firstFlutterCode = 12;
  var a = 12;
  const b = 'wosh';
  const ab = 12 / a; //这种方式不对，不可以这样
  final c = 12 / 3;
  final ac = 12 / a; //可以通过计算实现赋值
  print(firstFlutterCode);
  print(a);
  print(b);
  print(c);
  print(ab);
}

三：字符串拼接

通过${变量拼接}

void main(List<String> args) {
  final a = 12;
  final b = 'xiaozi';
  print("我的名字叫$b,今年有${a}岁");
}

如果是变量，可以省略{}，如果是对象调动变量的形式，就不可以省略大括号。

四：集合相关

列表：

final list = ["12", '12'];

set集合：

final set = {'12', 12};

map映射：

final map = {'name': '小智', 'age': 13};

五：定义函数

void main(List<String> args) {
  print(sum(1, 2));
}
int sum(int a, int b) {
  return a + b;
}

函数定义有返回值必须明确放回类型，不能使用var，final，const定义，但是可以不写类型，可以推断出返回值类型，但是不推荐使用。

可选参数：

注意：可选参数必须给初始化值，如果不给，需要使用？

[参数1，参数2…]命名可选参数

void p(String name, [int? a, int sex = 0]) {}
p('小智', 12);

{参数1，参数2，…}

命名可选参数在调用的时候必须带参数名，可选参数必须带初始化值，如果不带，将会被报错。

void f(String name, {int? a, int b = 12}) {}
f('小智', a: 12);

注意：只有可选参数才能有形参默认值

函数作为函数的参数

void main(List<String> args) {
  p(f);
}
void p(Function foo) {
  foo();
}
void f() {
  print("aa");
}

参数作为匿名函数的时候：

  p(() {
    print("bbb");
  });
void p(Function foo) {
  foo();
}

箭头函数作为参数：

箭头函数：当函数体只有一行代码的时候可以使用

p(() => print('ccc'));
void p(Function foo) {foo();}

函数作为参数带参数：

void main(List<String> args) {
  p(fn);
}
void p(Function f) {
  f('12');
}
void fn(String a) {
  print(a);
}

这种写法我们使用的不多，我们一般直接将函数的返回值作为函数进行传参

void main(List<String> args) {
  p(f);
}
void p(void fn(int a, int b)) {
  fn(12, 23);
}
void f(int d, int c) {
  print("${d}+++${c}");
}

此时的阅读比较差，可以使用typedef定义函数参数

void main(List<String> args) {
  p(f);
}
typedef C = void Function(int a, int b);
void p(C c) {
  c(12, 23);
}
void f(int d, int c) {
  print("${d}+++${c}");
}

函数作为返回值

void main(List<String> args) {
  var a = demo();
  var b = a(12, 23);
  print(b);
}
demo() {
  return (num1, num2) {
    return num1 + num2;
  };
}

运算符

这部分值写和JavaScript不一样的运算符

整除：~/

3~\2:结果为1

赋值运算符：

??=：表示如果变量为null，赋值，不为null将不赋值。

void main(List<String> args) {
  var name = 'xiaozhi';
  name ??= '小红';
  print(name);
}

??：表示前面的变量不为null，就是用改变量，如果为null，将使用后面的值

void main(List<String> args) {
  var name = 'xiaozhi';
  var myName = name ?? '小丽';
  print(myName);
}

级联运算符

…类似JavaScript的链式调用

void main(List<String> args) {
    //一般情况下我是时这么调用的
  var p = Person();
  p.name='xiao';
  p.show();
  p.eat();
  //级联方式
  var p1 = Person()
    ..name = 'xiaozhi'
    ..eat()
    ..show();
}

class Person {
  var name;
  void show() {
    print("yifu");
  }
  void eat() {
    print("吃法");
  }
}

循环控制

if的条件必须是rue或者false，如果一个字符串为空或者为null的时候，不会将其转成boolean类型

for循环有两种，普通for循环和for…in循环

其他循环体和JavaScript一样的。

类和对象

使用class关键词定义

void main(List<String> args) {
  var p1 = Person('12');
  var p = Person.nameAndAge('12', '13');
  p.show();
}
class Person {
  var name;
  var age;
  //dart是没有构造方法重载的
 Person(this.name);
   //命名构造函数
  Person.nameAndAge(this.age, this.name);
  show() {
    print(name);
    print(age);
  }
}

我们可以使用构造函数和命名构造函数的方式实现方法重载

Object类型和dynamic类型

Object类型：通过多态实现的变量，编译期调用方法会报错

void main(List<String> args) {
  Object obj = '123';
  obj.substring(1);//报错
}

dynamic：表示的是动态类型，编译期调用方法不会报错，但是在运行阶段可能会报错，导致运行错误。

  dynamic obj = '123';
  obj.substring(1)

重写tostring方法

class Person {
  var name;
  var age;
  Person(this.name, this.age);
  String toString() {
    return "$name,$age";
  }
}

类的初始化列表

使用finale修饰的，不能再方法内进行赋值，可以通过以下方式赋值

class Person {
  final String name;
  final int age;
  Person(this.name, {int age}):this.age=age??10{
      //不支持该方式，使用以上方式
      //this.age=age
  };
}

多个初始化列表使用逗号隔开。

下面这种方式叫做构造函数重定向：

class Person {
  String name;
  int age;
  Person(String name) : this._personConstructer(name, 0);
  Person._personConstructer(this.name, this.age);
}

常量构造函数：

构造函数使用const修饰，成员变量使用final修饰，保证每次创建对象都保证只创建一个对象

class Person {
  final String name;
  final String age;
  const Person(this.name, this.age);
}

工厂构造函数

class Person {
  String name;
  String age;
  Person(this.name, this.age);
  static final Map<String, Person> _nameCache = {};
  static final Map<String, Person> _ageCache = {};
  factory Person.withName(String name) {
    if (_nameCache.containsKey(name)) {
      return _nameCache[name];
    } else {
      final p = Person(name, '0');
      _nameCache[name] = p;
      return p;
    }
  }
  factory Person.withAge(String age) {
    if (_nameCache.containsKey(age)) {
      return _ageCache[age];
    } else {
      final p = Person('defualt', age);
      _nameCache[age] = p;
      return p;
    }
  }
}

代码都是对的，不知道为什么报错，不知道是不是语法变了。艹！！！！！！

get/set

class Person {
  String name;
  set setName(String name) {
    this.name = name;
  }
  String get getName {
    return name;
  }
}

代码还是报错，我真的服气了，写的代码和学习的一模一样都能报错！！必须先初始化值！！！！

类的继承

在子类的初始化列表内调用父类构造函数

class Animal {
  String name;
  Animal(this.name);
}
class Person extends Animal {
  String name;
  String age;
  Person(this.name, this.age) : super(name);
}

抽象类

// 注意二: 抽象类不能实例化
abstract class Shape {
  String getInfo() {
    return "形状";
  }

  //factory Shape() {
  //  return Rectangle();
  //}
}

// 注意一:继承自抽象类后, 必须实现抽象类的抽象方法
class Rectangle extends Shape {
  @override
  int getArea() {
    return 100;
  }
}

隐式接口

Dart中没有哪一个关键字是来定义接口的，没有这些关键字interface/protocol，默认情况下所有的类都是隐式接口， Dart支持单继承，当将一个类当做接口使用时, 那么实现这个接口的类, 必须实现这个接口中所有方法

class Runner {
  void running() {

  }
}
class Flyer {
  void flying() {

  }
class Animal {
  void eating() {
    print("动物次东西");
  }
  void running() {
    print("running");
  }
}
class SuperMan extends Animal implements Runner, Flyer {
  @override
  void eating() {
    super.eating();
  }
  @override
  void flying() {
  }
}

mixin混入

使用mixin定义混入类，使用with引入混入

main(List<String> args) {
  final sm = SuperMan();
  sm.running();
  sm.flying();
}
mixin Runner {
  void running() {
    print("runner running");
  }
}
mixin Flyer {
  void flying() {
    print("flying");
  }
}
class Animal {
  void eating() {
    print("动物次东西");
  }
  void running() {
    print("animal running");
  }
}
class SuperMan extends Animal with Runner, Flyer {
  @override
  void eating() {
    super.eating();
  }
  void running() {
    print("SuperMan running");
  }
}

类属性和类方法

class Person {
  // 成员变量
  String name;
  // 静态属性(类属性)
  static String courseTime;
  // 对象方法
  void eating() {
    print("eating");
  }
  // 静态方法(类方法)
  static void gotoCourse() {
    print("去上课");
  }
}

枚举类型

main(List<String> args) {
  final color = Colors.red;
  switch (color) {
    case Colors.red:
      print("红色");
      break;
    case Colors.blue:
      print("蓝色");
      break;
    case Colors.green:
      print("绿色");
      break;
  }
  print(Colors.values);
  print(Colors.red.index);
}
enum Colors {
  red,
  blue,
  green
}

使用类库

使用系统库

系统的库: import ‘dart:库的名字’;

// import 'dart:io';
// import 'dart:isolate';
// import 'dart:async';
// import 'dart:math';
import 'dart:math';
main(List<String> args) {
  final num1 = 20;
  final num2 = 30;
  print(min(num1, num2));
}

使用自定义库

就是引入自己创建的dart文件，使用里面的方法和变量等

1.补充一: as关键字给库起别名
2.补充二: 默认情况下载导入一个库时, 导入这个库中所有的内容
- show: 执行要导入的内容
- hide: 隐藏某个要导入的内容, 导入其它内容
3.公共的dart文件的抽取: export


// import 'utils/math_utils.dart' as mUtils;
// import "utils/math_utils.dart" show sum, mul;
// import "utils/math_utils.dart" hide mul;
// import 'utils/date_utils.dart';
import "utils/utils.dart";
main(List<String> args) {
  // print(sum(20, 30));
  print(sum(20, 30));
  // print(mul(20, 30));
  print(dateFormat());

  min(20, 30);
}

date_utils.dart文件：

String dateFormat() {
  return "2020-12-12";
}

math_utils.dart文件：

int sum(int num1, int num2) {
  return num1 + num2;
}
int mul(int num1, int num2) {
  return num1 * num2;
}
int min(int num1, int num2) {
  return num1 > num2 ? num2: num1;
}

提取公共代码到一个文件内：utils.dart（看以上代码）

export 'math_utils.dart';
export 'date_utils.dart';

使用第三方库

导入方式一样，只是地址为第三方地址

import 'package:http/http.dart' as http;
main(List<String> args) async {
  var url = 'http://123.207.32.32:8000/home/multidata';
  var response = await http.get(url);
  print('Response status: ${response.statusCode}');
  print('Response body: ${response.body}');
}

flutter环境配置

环境配置地址：https://flutter.cn/docs/get-started/install/windows

按照这个环境配置即可，如需使用其他模拟器，请自行百度。

创建项目

flutter create 项目名     ----创建项目指令
flutter run              ----运行项目

文件

.dart_tool：用于存放第三方dart库使用，记录第三方库的相关信息，只要下载会自动记录

android：flutter工程

ios：ios工程包

web：web项目工程

window：windows桌面应用工程

build：打包目录

lib：工程源代码存放处，主入口文件存放处。

test：测试代码存放处。

第一个flutter工程

将main中的代码全部删除，写入：

import 'package:flutter/cupertino.dart';
void main(List<String> args) {
  runApp(app)
}

入口需要执行一个全局函数runApp,用于运行项目，runApp函数接收一个类型为Widget的参数。

注意：在flutter中，万物皆是Widget

在flutter中，几乎所有的组件都实现了Widget（按照前端的说法，就是一个组件），属于Widget类型，此时我们的app参数可以写入：

import 'package:flutter/cupertino.dart';
void main(List<String> args) {
  var app = Text("hello wolrd ");
  runApp(app);
}

这时候会报一个错。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-v49dFA6Q-1652173929950)(\img\fristerror.PNG)]

这时候会发现，这个错误是没有设置文字布局的排版方向，因为flutter考虑到在很多国家的文字排版都不一样，所以将排版方向设置为必填项目。

重启项目，结果为：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kNJDXFC6-1652173929959)(\img\helloworld.PNG)]

此时第一个项目运行成功！

模板脚手架

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main(List<String> args) {
  var app = MaterialApp(
    home: Scaffold(
      appBar: AppBar(
        title:Text("我的第一个应用"),
      ) ,
      body: Center(
        child: Text(
          "任性的代码",
          style: TextStyle(
            color:Colors.amber,           
          )        
        ),
      ),
    ),
  );
  runApp(app);
}

MaterialApp：App的风格为Material提供的风格，Material中的组件定义了自己的默认样式，

Scaffold：脚手架，主要有appBar和body两个属性，appBar表示应用的上头，body应用的内容。

widget

widget：按照前端的说法widget就是一个个个的组件，也就说flutter可以按照组件化编程，但是和react或者vue不同的是，flutter的相关样式或者其他代码是写在一块的。注意：全部的widget都是无状态的，只能通过定义类的形式来定义、获取、修改相关的状态。

组件有个widget属性，表示父组件的实例

widget有两种：StatelessWidget和StatefulWidget两种

StatelessWidget： 没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；
StatefulWidget： 需要保存状态，并且可能出现状态改变的Widget；

StatelessWidget

void main(List<String> args) {
  var app = MaterialApp(
    home: AppHomePage(),
  );
  runApp(app);
}
class AppHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    //throw UnimplementedError();
    return Scaffold(
        appBar: AppBar(
          title: Text("我的"),
        ),
        body: AppBodyPage());
  }
}
class AppBodyPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text("任性的代码",
          style: TextStyle(
            color: Colors.amber,
          )),
    );
  }
}

StatefulWidget

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowCheckedModeBanner: false,
        home: HYHomePage()
    );
  }
}
class HYHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print("HYHomePage Build");
    return Scaffold(
        appBar: AppBar(
          title: Text("第一个Flutter程序"),
        ),
        body: HYContentBody()
    );
  }
}
// StatefullWidget: 继承自StatefulWidget的类(可以接收父Widget传过来的数据)/State类(状态)
// flag: 状态
// Stateful不能定义状态 -> 创建一个单独的类, 这个类负责维护状态
class HYContentBody extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return HYContentBodyState();
  }
}
class _HYContentBodyState extends State<HYContentBody> {
  var _flag = true;
  @override
  Widget build(BuildContext context) {
    print("HYContentBodyState Build");
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            value: flag,
            onChanged: (value) {
              this.setState(() {
                flag = value;
              });
            },
          ),
          Text("同意协议", style: TextStyle(fontSize: 20))
        ],
      ),
    );
  }
}

StatefulWidget本身是不能用于定义状态的，而是通过其内部的createState函数创建一个状态，该状态需要继承一个State类，在State类中可以使用setState来实现对状态的改变。

注意：StateWidget用于管理状态的类和其状态最好加‘_’，加’_'之后该类只能被StateWidget类使用。

widget生命周期

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ysn5YaCT-1652173929960)(\img\shengming.PNG)]

对于StatelessWidget无状态组件，其生命周期只有：constructor>build>deactivate>dispose这条路径。

对于StatefulWidget有状态组件，生命周期完整过程如上图所示（图缺少最开始的调用的constructor）。

生命周期完整介绍：

https://www.jianshu.com/p/6ed6f7de01ff

didChangeDependencies()：当State对象的依赖发生变化时会被调用；didChangeDependencies 方法调用后，组件的状态变为 dirty，立即调用 build 方法。

reassemble()：此回调是专门为了开发调试而提供的，在热重载(hot reload)时会被调用，此回调在Release模式下永远不会被调用。

didUpdateWidget()：在父widget重新构建子widget时，子widget的didUpdateWidget可能会被调用。

eactivate()：当State对象从树中被移除时，会调用此回调。在一些场景下，Flutter framework会将State对象重新插到树中，如包含此State对象的子树在树的一个位置移动到另一个位置时（可以通过GlobalKey来实现）。如果移除后没有重新插入到树中则紧接着会调用dispose()方法。

dispose()：当State对象从树中被永久移除时调用；通常在此回调中释放资源。

TextWidget

普通文本:Text

文本使用的组件叫做Text，在相关的属性可以通过点击该组件查看源码

  const Text(
    String this.data, {
    Key? key,
    this.style,
    this.strutStyle,
    this.textAlign,
    this.textDirection,
    this.locale,
    this.softWrap,
    this.overflow,
    this.textScaleFactor,
    this.maxLines,
    this.semanticsLabel,
    this.textWidthBasis,
    this.textHeightBehavior,
  }) :

控制文本布局的参数： 如文本对齐方式 textAlign、文本排版方向 textDirection，文本显示最大行数 maxLines、文本截断规则 overflow 等等，这些都是构造函数中的参数；
控制文本样式的参数： 如字体名称 fontFamily、字体大小 fontSize、文本颜色 color、文本阴影 shadows 等等，这些参数被统一封装到了构造函数中的参数 style 中。

Text(text,
    textAlign: TextAlign.center,
    maxLines: 3,
    overflow:TextOverflow.ellipsis,
    style: TextStyle(
      color:Colors.green,
      fontSize:30,
      fontStyle: FontStyle.italic,
    )
 );

注意：在之前我们在runApp中直接使用Text需要设置文字方向，而在MaterialApp中不需要设置主要是MaterialApp已经有默认的文本方向了，而且，我们设置Text的文本方向不是问Text widget本身设置的而是为其RichText设置的，Text会渲染成一个RichText。

富文本Text.rich()

接收一个TextSpan类型的widget，在TextSpan内可以创建多个TextSpan

Text.rich(
      TextSpan(
        children: [
          TextSpan(text:'你好',style: TextStyle(color:Colors.red)),
          TextSpan(text: '好不好！', style: TextStyle(color: Colors.green)),
          TextSpan(text: '别呀！燕子！', style: TextStyle(color: Colors.black)),
        ]
      )
    );

Button Widget

RaisedButton：带有阴影的按钮

RaisedButton(
   child: Text("RaisedButton"),
   textColor: Colors.white,
   color: Colors.purple,
   onPressed: () => print("RaisedButton Click"),
),

FlatButton：扁平化按钮

FlatButton(
   child: Text("FlatButton"),
   color: Colors.orange,
   onPressed: () => print("FlatButton Click"),
),

OutlineButton：线框按钮

 OutlineButton(
   child: Text("OutlineButton"),
   onPressed: () => print("OutlineButton"),
),

FloatingActionButton：悬浮按钮

这个按钮可以和appBar和body同级，

自定义按钮:使用基础FlatButton组件自定义

    FlatButton(
      color: Colors.amberAccent,
      shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8)
      ),
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Icon(Icons.favorite, color: Colors.red,),
          Text("喜欢作者")
        ],
      ),
      onPressed: ()=>{},
    )

ButtonTheme：按钮风格，

定义按钮小部件的默认配置，

ButtonTheme(
   minWidth: 30,
   height: 10,
  child: FlatButton(
      padding: EdgeInsets.all(0),
      color: Colors.red,
      materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
      child: Text("Flat Button1"),
      textColor: Colors.white,
      onPressed: () {},
     ),
)

图标和字体图标

Icon(Icons.pets, size: 300, color: Colors.orange,);
Icon(IconData(0xe91d, fontFamily: 'MaterialIcons'), size: 300, color: Colors.orange,);

Text("\ue91d", style: TextStyle(fontSize: 100, color: Colors.orange, fontFamily: "MaterialIcons"),);

Image组件

Image.assets：加载本地资源图片；
Image.network：加载网络中的图片；

加载网络图片

return Center(
      child: Container(
        child: Image.network(
          "http://img0.dili360.com/ga/M01/48/3C/wKgBy1kj49qAMVd7ADKmuZ9jug8377.tub.jpg",
          alignment: Alignment.topCenter,
          repeat: ImageRepeat.repeatY,
          color: Colors.red,
          colorBlendMode: BlendMode.colorDodge,
        ),
        width: 300,
        height: 300,
        color: Colors.yellow,
      ),
    );

加载本地图片

需要现在pubspec.yaml配置路径，打开assets配置项。

return Center(
      child: Container(
        width: 300,
        height: 300,
        color: Colors.yellow,
        child: Image.asset("images/test.jpeg"),
      ),
    );

圆角图像

方式一：CircleAvatar

 return Center(
      child: CircleAvatar(
        radius: 100,
        backgroundImage: 		         NetworkImage("https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg"),
        child: Container(
          alignment: Alignment(0, .5),
          width: 200,
          height: 200,
          child: Text("兵长利威尔")
        ),
      ),
    );

方式二：ClipOval

return Center(
      child: ClipOval(
        child: Image.network(
          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
          width: 200,
          height: 200,
        ),
      ),
    );

圆角图片ClipRRect

 return Center(
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: Image.network(
          "https://tva1.sinaimg.cn/large/006y8mN6gy1g7aa03bmfpj3069069mx8.jpg",
          width: 200,
          height: 200,
        ),
      ),
    );

文本输入TextField

重要属性：

controller：数据绑定控制器

onChanged：数据改变时回调函数

decoration：TextField相关装饰

final mytest = TextEditingController();//控制变量，用于将变量绑定到输入框
Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(
          controller: mytest,
          onChanged: (value) => {
              print(value)
          },
          decoration: InputDecoration(
              icon: Icon(Icons.people),
              labelText: '用户名',
              hintText: "请输入用户名",
              hoverColor: Colors.blue,
              labelStyle: TextStyle(
                color: Colors.red,
                fontSize: 20,
              )),
        ),
        FlatButton(
          child: Text("点击"),
          onPressed: () => {
            print(mytest.text)
          },
        )
      ],
    );
  }

flutter布局

SizedBox

用于设置两组件间间隙

children: <Widget>[
            TextField(.....),
            SizedBox(height: 10,),
            TextField(.....),
            SizedBox(height: 10,),
            Container(....)
          ],

单子布局

单子组件只能容纳一个组件，即属性child。

Align

该组件用于设置元素位置相关布局，其Center组件完全继承自该组件。

 Align(
        alignment: Alignment(1, 1),
        widthFactor: 5,
        heightFactor: 5,
        child: Icon(Icons.pets, size: 50)
    );

Padding

该组件可用于设置内边距

Padding(
      padding: EdgeInsets.only(
          bottom: 10
      ),
      child: Text("你好啊,李银河", 
      	style: TextStyle(fontSize: 30, backgroundColor: Colors.red),),
    );

Container

表示的是一个单子布局容器，该容器类似html的div标签，但容纳的组件只能是一个。

注意：属性color和decoration只能出现一个。

alignment：0.0为原点，距离边距为1，

Container(
      width: 200,
      height: 200,
      alignment: Alignment(0, 0),
      padding: EdgeInsets.all(20),
      margin: EdgeInsets.all(10),
      child: Text("Hello World"),
      decoration: BoxDecoration(
          color: Colors.red,
          border: Border.all(
              width: 5,
              color: Colors.purple
          ),
          boxShadow: [
            BoxShadow(color: Colors.orange, offset: Offset(10, 10), spreadRadius: 5, blurRadius: 10),
            BoxShadow(color: Colors.blue, offset: Offset(-10, 10), spreadRadius: 5, blurRadius: 10),
          ]
      ),
    );

多子布局

Flex布局

事实上，我们即将学习的Row组件和Column组件都继承自Flex组件。

Flex组件和Row、Column属性主要的区别就是多一个direction。
当direction的值为Axis.horizontal的时候，则是Row。
当direction的值为Axis.vertical的时候，则是Column。

Row

水平方向尽可能占据比较大的空间，水平方向也是希望包裹内容, 那么设置mainAxisSize = min
垂直方向包裹内容
MainAxisAlignment:主轴

start: 主轴的开始位置挨个摆放元素(默认值)

end: 主轴的结束位置挨个摆放元素

center: 主轴的中心点对齐

spaceBetween: 左右两边的间距为0, 其它元素之间平分间距

spaceAround: 左右两边的间距是其它元素之间的间距的一半

spaceEvenly: 所有的间距平分空间

CrossAxisAlignment:交叉轴

start: 交叉轴的起始位置对齐

end: 交叉轴的结束位置对齐

center: 中心点对齐(默认值)

baseline: 基线对齐(必须有文本的时候才起效果)

stretch: 先Row占据交叉轴尽可能大的空间, 将所有的子Widget交叉轴的高度, 拉伸到最大

Row(
   mainAxisAlignment: MainAxisAlignment.spaceBetween,
   children: <Widget>[
       Text(
          "进击的巨人挺不错的",
          style: TextStyle(fontSize: 20, color: Colors.white),
        ),
       IconButton(
          icon: Icon(
             Icons.favorite,
             color: _isFavor? Colors.red : Colors.white,
          ),
          onPressed: () {
             setState(() {
             _isFavor = !_isFavor;
         });
     },
)

columns

这个和Row类似，但是是垂直布局

Column(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      crossAxisAlignment: CrossAxisAlignment.center,
      textBaseline: TextBaseline.alphabetic,
      verticalDirection: VerticalDirection.down,
      mainAxisSize: MainAxisSize.min,
      children: <Widget>[
        Container(
          width: 80,
          height: 60,
          color: Colors.red,
          child: Text(
            "Hellxo",
            style: TextStyle(fontSize: 20),
          ),
        ),
        Container(
          width: 120,
          height: 100,
          color: Colors.green,
          child: Text(
            "Woxrld",
            style: TextStyle(fontSize: 30),
          ),
        ),
        Container(
          width: 90,
          height: 80,
          color: Colors.blue,
          child: Text(
            "abxc",
            style: TextStyle(fontSize: 12),
          ),
        ),
        Container(
          width: 50,
          height: 120,
          color: Colors.orange,
          child: Text(
            "cxba",
            style: TextStyle(fontSize: 40),
          ),
        ),
      ],
    );

Stack

默认的大小是包裹内容的，就是组件如何重叠

alignment: 从什么位置开始排布所有的子Widget

fit: expand(很少) 将子元素拉伸到尽可能大

overflow: 超出部分如何处理

Stack(
      children: <Widget>[
        Image.asset("assets/images/juren.jpeg"),
        Positioned(
          left: 0,
          right: 0,
          bottom: 0,
          child: Container(
            padding: EdgeInsets.symmetric(horizontal: 8),
            color: Color.fromARGB(150, 0, 0, 0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Text(
                  "进击的巨人挺不错的",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
                IconButton(
                  icon: Icon(
                    Icons.favorite,
                    color: _isFavor? Colors.red : Colors.white,
                  ),
                  onPressed: () {
                    setState(() {
                      _isFavor = !_isFavor;
                    });
                  },
                )
              ],
            ),
          ),
        )
      ],
    );

Positioned

定位组件，

Positioned(
    left: 20,
    bottom: -50,
    child: Container(
        width: 150,
        height: 150,
        color: Colors.red,
)),

flutter滚动

ListView

ListView有三种方式可以实现

ListView():默认构造器
ListView.build：和默认方式用法没有什么差异，但是会增加首屏的渲染时间，
ListView.separated：可以生成列表项之间的分割器，它除了比ListView.builder多了一个separatorBuilder参数，该参数是一个分割器生成器。

ListView()

ListView(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("人的一切痛苦，本质。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("人活在世界上，不可以有偏差；。", style: textStyle),
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Text("我活在世上，遇见些有趣的事。", style: textStyle),
        )
      ],
    );

ListTile的使用

在开发中，我们经常见到一种列表，有一个图标或图片（Icon），有一个标题（Title），有一个子标题（Subtitle），还有尾部一个图标（Icon）

ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.people, size: 36,),
          title: Text("联系人"),
          subtitle: Text("联系人信息"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        ListTile(
          leading: Icon(Icons.email, size: 36,),
          title: Text("邮箱"),
          subtitle: Text("邮箱地址信息"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        ListTile(
          leading: Icon(Icons.message, size: 36,),
          title: Text("消息"),
          subtitle: Text("消息详情信息"),
          trailing: Icon(Icons.arrow_forward_ios),
        ),
        ListTile(
          leading: Icon(Icons.map, size: 36,),
          title: Text("地址"),
          subtitle: Text("地址详情信息"),
          trailing: Icon(Icons.arrow_forward_ios),
        )
      ],
    );

垂直方向滚动

我们可以通过设置 scrollDirection 参数来控制视图的滚动方向。

我们通过下面的代码实现一个水平滚动的内容：

这里需要注意，我们需要给Container设置width，否则它是没有宽度的，就不能正常显示。
或者我们也可以给ListView设置一个itemExtent，该属性会设置滚动方向上每个item所占据的宽度。

 ListView(
      scrollDirection: Axis.horizontal,
      itemExtent: 200,
      children: <Widget>[
        Container(color: Colors.red, width: 200),
        Container(color: Colors.green, width: 200),
        Container(color: Colors.blue, width: 200),
        Container(color: Colors.purple, width: 200),
        Container(color: Colors.orange, width: 200),
      ],
    );

ListView.build

ListView.build适用于子Widget比较多的场景

该方法有两个重要参数：

itemBuilder：列表项创建的方法。当列表滚动到对应位置的时候，ListView会自动调用该方法来创建对应的子Widget。类型是IndexedWidgetBuilder，是一个函数类型。
itemCount：表示列表项的数量，如果为空，则表示ListView为无限列表。

 ListView.builder(
      itemCount: 100,
      itemExtent: 80,
      itemBuilder: (BuildContext context, int index) {
        return ListTile(title: Text("标题$index"), subtitle: Text("详情内容$index"));
      }
    );

ListView.separated

ListView.separated可以生成列表项之间的分割器，它除了比ListView.builder多了一个separatorBuilder参数，该参数是一个分割器生成器。

下面我们看一个例子：奇数行添加一条蓝色下划线，偶数行添加一条红色下划线

 ListView.separated(
      itemBuilder: (BuildContext context, int index) {
        return ListTile(
          leading: Icon(Icons.people),
          title: Text("联系人${index+1}"),
          subtitle: Text("联系人电话${index+1}"),
        );
      },
      separatorBuilder: (BuildContext context, int index) {
        return index % 2 == 0 ? redColor : blueColor;
      },
      itemCount: 100
    );

生成多个元素

List.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });

GridView组件

GridView用于展示多列的展示，在开发中也非常常见，比如直播App中的主播列表、电商中的商品列表等等。

GridView构造函数

重要属性：

SliverGridDelegateWithFixedCrossAxisCount：一列个数
SliverGridDelegateWithMaxCrossAxisExtent：设置每个元素的宽度，通过宽度计算出每列的个数。

class MyGridCountDemo extends StatelessWidget {
  List<Widget> getGridWidgets() {
    returnList.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

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

class MyGridExtentDemo extends StatelessWidget {
  List<Widget> getGridWidgets() {
    returnList.generate(100, (index) {
      return Container(
        color: Colors.purple,
        alignment: Alignment(0, 0),
        child: Text("item$index", style: TextStyle(fontSize: 20, color: Colors.white)),
      );
    });
  }
  @override
  Widget build(BuildContext context) {
    return GridView(
      gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
        maxCrossAxisExtent: 150,
        mainAxisSpacing: 10,
        crossAxisSpacing: 10,
        childAspectRatio: 1.0
      ),
      children: getGridWidgets(),
    );
  }
}

两种方式也可以不设置delegate

可以分别使用：GridView.count构造函数和GridView.extent构造函数实现相同的效果，这里不再赘述。

GridView.build

和ListView一样，使用构造函数会一次性创建所有的子Widget，会带来性能问题，所以我们可以使用GridView.build来交给GridView自己管理需要创建的子Widget。

class _GridViewBuildDemoState extends State<GridViewBuildDemo> {
  List<Anchor> anchors = [];
  @override
  void initState() {
    getAnchors().then((anchors) {
      setState(() {
        this.anchors = anchors;
      });
    });
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: GridView.builder(
        shrinkWrap: true,
        physics: ClampingScrollPhysics(),
        gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
          crossAxisCount: 2,
          mainAxisSpacing: 10,
          crossAxisSpacing: 10,
          childAspectRatio: 1.2
        ),
        itemCount: anchors.length,
        itemBuilder: (BuildContext context, int index) {
          return Container(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Image.network(anchors[index].imageUrl),
                SizedBox(height: 5),
                Text(anchors[index].nickname, style: TextStyle(fontSize: 16),),
                Text(anchors[index].roomName, maxLines: 1, overflow: TextOverflow.ellipsis,)
              ],
            ),
          );
        }
      ),
    );
  }
}

Slivers

我们考虑一个这样的布局：一个滑动的视图中包括一个标题视图（HeaderView），一个列表视图（ListView），一个网格视图（GridView）。

我们怎么可以让它们做到统一的滑动效果呢？使用前面的滚动是很难做到的。

Flutter中有一个可以完成这样滚动效果的Widget：CustomScrollView，可以统一管理多个滚动视图。

在CustomScrollView中，每一个独立的，可滚动的Widget被称之为Sliver。

补充：Sliver可以翻译成裂片、薄片，你可以将每一个独立的滚动视图当做一个小裂片。

Slivers的基本使用

因为我们需要把很多的Sliver放在一个CustomScrollView中，所以CustomScrollView有一个slivers属性，里面让我们放对应的一些Sliver：

SliverList：类似于我们之前使用过的ListView；
SliverFixedExtentList：类似于SliverList只是可以设置滚动的高度；
SliverGrid：类似于我们之前使用过的GridView；
SliverPadding：设置Sliver的内边距，因为可能要单独给Sliver设置内边距；
SliverAppBar：添加一个AppBar，通常用来作为CustomScrollView的HeaderView；
SliverSafeArea：设置内容显示在安全区域（比如不让齐刘海挡住我们的内容）

简单演示一下：SliverGrid+SliverPadding+SliverSafeArea的组合

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CustomScrollView(
      slivers: <Widget>[
        SliverSafeArea(
          sliver: SliverPadding(
            padding: EdgeInsets.all(8),
            sliver: SliverGrid(
              gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
                crossAxisCount: 2,
                crossAxisSpacing: 8,
                mainAxisSpacing: 8,
              ),
              delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
                  return Container(
                    alignment: Alignment(0, 0),
                    color: Colors.orange,
                    child: Text("item$index"),
                  );
                },
                childCount: 20
              ),
            ),
          ),
        )
      ],
    );
  }
}

Slivers的组合使用

使用官方的示例程序，将SliverAppBar+SliverGrid+SliverFixedExtentList做出如下界面：

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return showCustomScrollView();
  }

  Widget showCustomScrollView() {
    returnnew CustomScrollView(
      slivers: <Widget>[
        const SliverAppBar(
          expandedHeight: 250.0,
          flexibleSpace: FlexibleSpaceBar(
            title: Text('Coderwhy Demo'),
            background: Image(
              image: NetworkImage(
                "https://tva1.sinaimg.cn/large/006y8mN6gy1g72j6nk1d4j30u00k0n0j.jpg",
              ),
              fit: BoxFit.cover,
            ),
          ),
        ),
        new SliverGrid(
          gridDelegate: new SliverGridDelegateWithMaxCrossAxisExtent(
            maxCrossAxisExtent: 200.0,
            mainAxisSpacing: 10.0,
            crossAxisSpacing: 10.0,
            childAspectRatio: 4.0,
          ),
          delegate: new SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              returnnew Container(
                alignment: Alignment.center,
                color: Colors.teal[100 * (index % 9)],
                child: new Text('grid item $index'),
              );
            },
            childCount: 10,
          ),
        ),
        SliverFixedExtentList(
          itemExtent: 50.0,
          delegate: SliverChildBuilderDelegate(
                (BuildContext context, int index) {
              returnnew Container(
                alignment: Alignment.center,
                color: Colors.lightBlue[100 * (index % 9)],
                child: new Text('list item $index'),
              );
            },
            childCount: 20
          ),
        ),
      ],
    );
  }
}

监听滚动事件

对于滚动的视图，我们经常需要监听它的一些滚动事件，在监听到的时候去做对应的一些事情。

比如视图滚动到底部时，我们可能希望做上拉加载更多；

比如滚动到一定位置时显示一个回到顶部的按钮，点击回到顶部的按钮，回到顶部；

比如监听滚动什么时候开始，什么时候结束；

在Flutter中监听滚动相关的内容由两部分组成：ScrollController和ScrollNotification。

ScrollController

在Flutter中，Widget并不是最终渲染到屏幕上的元素（真正渲染的是RenderObject），因此通常这种监听事件以及相关的信息并不能直接从Widget中获取，而是必须通过对应的Widget的Controller来实现。

ListView、GridView的组件控制器是ScrollController，我们可以通过它来获取视图的滚动信息，并且可以调用里面的方法来更新视图的滚动位置。

另外，通常情况下，我们会根据滚动的位置来改变一些Widget的状态信息，所以ScrollController通常会和StatefulWidget一起来使用，并且会在其中控制它的初始化、监听、销毁等事件。

我们来做一个案例，当滚动到1000位置的时候，显示一个回到顶部的按钮：

jumpTo(double offset)、animateTo(double offset,...)：这两个方法用于跳转到指定的位置，它们不同之处在于，后者在跳转时会执行一个动画，而前者不会。
ScrollController间接继承自Listenable，我们可以根据ScrollController来监听滚动事件。

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomePageState();
}

class MyHomePageState extends State<MyHomePage> {
  ScrollController _controller;
  bool _isShowTop = false;
  
  @override
  void initState() {
    // 初始化ScrollController
    _controller = ScrollController();
    
    // 监听滚动
    _controller.addListener(() {
      var tempSsShowTop = _controller.offset >= 1000;
      if (tempSsShowTop != _isShowTop) {
        setState(() {
          _isShowTop = tempSsShowTop;
        });
      }
    });
    
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("ListView展示"),
      ),
      body: ListView.builder(
        itemCount: 100,
        itemExtent: 60,
        controller: _controller,
        itemBuilder: (BuildContext context, int index) {
          return ListTile(title: Text("item$index"));
        }
      ),
      floatingActionButton: !_isShowTop ? null : FloatingActionButton(
        child: Icon(Icons.arrow_upward),
        onPressed: () {
          _controller.animateTo(0, duration: Duration(milliseconds: 1000), curve: Curves.ease);
        },
      ),
    );
  }
}

NotificationListener

如果我们希望监听什么时候开始滚动，什么时候结束滚动，这个时候我们可以通过NotificationListener。

NotificationListener是一个Widget，模板参数T是想监听的通知类型，如果省略，则所有类型通知都会被监听，如果指定特定类型，则只有该类型的通知会被监听。
NotificationListener需要一个onNotification回调函数，用于实现监听处理逻辑。
该回调可以返回一个布尔值，代表是否阻止该事件继续向上冒泡，如果为true时，则冒泡终止，事件停止向上传播，如果不返回或者返回值为false 时，则冒泡继续。

案例: 列表滚动, 并且在中间显示滚动进度

class MyHomeNotificationDemo extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => MyHomeNotificationDemoState();
}

class MyHomeNotificationDemoState extends State<MyHomeNotificationDemo> {
  int _progress = 0;

  @override
  Widget build(BuildContext context) {
    return NotificationListener(
      onNotification: (ScrollNotification notification) {
        // 1.判断监听事件的类型
        if (notification is ScrollStartNotification) {
          print("开始滚动.....");
        } elseif (notification is ScrollUpdateNotification) {
          // 当前滚动的位置和总长度
          final currentPixel = notification.metrics.pixels;
          final totalPixel = notification.metrics.maxScrollExtent;
          double progress = currentPixel / totalPixel;
          setState(() {
            _progress = (progress * 100).toInt();
          });
          print("正在滚动：${notification.metrics.pixels} - ${notification.metrics.maxScrollExtent}");
        } elseif (notification is ScrollEndNotification) {
          print("结束滚动....");
        }
        returnfalse;
      },
      child: Stack(
        alignment: Alignment(.9, .9),
        children: <Widget>[
          ListView.builder(
            itemCount: 100,
            itemExtent: 60,
            itemBuilder: (BuildContext context, int index) {
              return ListTile(title: Text("item$index"));
            }
          ),
          CircleAvatar(
            radius: 30,
            child: Text("$_progress%"),
            backgroundColor: Colors.black54,
          )
        ],
      ),
    );
  }
}

flutter异步处理和发网络请求

异步处理可以参考这个地址：

https://www.jianshu.com/p/c0e30769ea7e

flutter实现网络请求

在Flutter中常见的网络请求方式有三种：HttpClient、http库、dio库；

dio库

官方提供的HttpClient和http都可以正常的发送网络请求，但是对于现代的应用程序开发来说，我们通常要求的东西会更多：比如拦截器、取消请求、文件上传/下载、超时设置等等；

这个时候，我们可以使用一个在Flutter中非常流行的三方库：dio；

官网有对dio进行解释：

dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

使用dio三方库必然也需要先在pubspec中依赖它：

  dio:^3.0.1

代码演练：

import'package:dio/dio.dart';

void dioNetwork() async {
  // 1.创建Dio请求对象
  final dio = Dio();

  // 2.发送网络请求
  final response = await dio.get("http://123.207.32.32:8000/api/v1/recommend");

  // 3.打印请求结果
  if (response.statusCode == HttpStatus.ok) {
    print(response.data);
  } else {
    print("请求失败：${response.statusCode}");
  }
}

dio库的封装

http_config.dart

class HTTPConfig {
  staticconst baseURL = "https://httpbin.org";
  staticconst timeout = 5000;
}

http_request.dart

import'package:dio/dio.dart';
import'package:testflutter001/service/config.dart';

class HttpRequest {
  staticfinal BaseOptions options = BaseOptions(
      baseUrl: HTTPConfig.baseURL, connectTimeout: HTTPConfig.timeout);
  staticfinal Dio dio = Dio(options);

  static Future<T> request<T>(String url,
      {String method = 'get', Map<String, dynamic> params, Interceptor inter}) async {
    // 1.请求的单独配置
    final options = Options(method: method);

    // 2.添加第一个拦截器
    Interceptor dInter = InterceptorsWrapper(
      onRequest: (RequestOptions options) {
        // 1.在进行任何网络请求的时候, 可以添加一个loading显示

        // 2.很多页面的访问必须要求携带Token,那么就可以在这里判断是有Token

        // 3.对参数进行一些处理,比如序列化处理等
        print("拦截了请求");
        return options;
      },
      onResponse: (Response response) {
        print("拦截了响应");
        return response;
      },
      onError: (DioError error) {
        print("拦截了错误");
        return error;
      }
    );
    List<Interceptor> inters = [dInter];
    if (inter != null) {
      inters.add(inter);
    }
    dio.interceptors.addAll(inters);

    // 3.发送网络请求
    try {
      Response response = await dio.request<T>(url, queryParameters: params, options: options);
      return response.data;
    } on DioError catch(e) {
      return Future.error(e);
    }
  }
}

代码使用：

HttpRequest.request("https://httpbin.org/get", params: {"name": "why", 'age': 18}).then((res) {
  print(res);
});

HttpRequest.request("https://httpbin.org/post",
                    method: "post", params: {"name": "why", 'age': 18}).then((res) {
  print(res);
});

路由、导航和事件处理

组件封装

评分五星封装

// ignore_for_file: prefer_const_literals_to_create_immutables, prefer_const_constructors, use_key_in_widget_constructors, prefer_const_constructors_in_immutables
import 'dart:ffi';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class YJBStarRating extends StatefulWidget {
  final double? rating; //得分
  final double maxRating; //满分
  final int count; //星星个数
  final double size; //大小
  final Color unsetColor;
  final Color selectColor;
  YJBStarRating(
      {@required this.rating,
      this.maxRating = 10,
      this.count = 5,
      this.size = 30,
      this.unsetColor = Colors.grey,
      this.selectColor = Colors.red});
  @override
  State<YJBStarRating> createState() => _YJBStarRatingState();
}
class _YJBStarRatingState extends State<YJBStarRating> {
  @override
  Widget build(BuildContext context) {
    return Stack(children: [
      Row(
        children: buildunsetStar(),
      ),
      Row(children: buildSelectStar())
    ]);
  }
  List<Widget> buildunsetStar() {
    return List.generate(widget.count, (index) {
      return Icon(
        Icons.star_border,
        color: widget.unsetColor,
        size: widget.size,
      );
    });
  }
  List<Widget> buildSelectStar() {
    List<Widget> starList = [];
    final markStar = widget.maxRating / widget.count; //每一个多少分
    final fullStar = (widget.rating! / markStar).floor(); //满的个数
    final double otherStar =
        ((widget.rating! / markStar) - fullStar) * widget.size;
    //满的个数
    for (int i = 0; i < fullStar; i++) {
      starList.add(Icon(
        Icons.star,
        color: widget.selectColor,
        size: widget.size,
      ));
    }
    //裁剪不满的
    starList.add(ClipRect(
        clipper: MyClip(otherStar),
        child: Icon(
          Icons.star,
          color: widget.selectColor,
          size: widget.size,
        )));
    return starList;
  }
}
class MyClip extends CustomClipper<Rect> {
  final double clipSize;
  MyClip(this.clipSize);
  @override
  Rect getClip(Size size) {
    return Rect.fromLTWH(0, 0, clipSize, size.height);
  }
  @override
  bool shouldReclip(MyClip oldClipper) {
    return false;
  }
}

虚线封装

// ignore_for_file: prefer_const_constructors, sized_box_for_whitespace
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
class YJBDashed extends StatelessWidget {
  final Axis axis; //方向
  final int count; //线点
  final double dashHeight; //高度
  final double dashWidth; //宽度
  final Color color; //颜色
  // ignore: use_key_in_widget_constructors
  YJBDashed(
      {@required this.axis = Axis.horizontal,
      this.count = 20,
      this.dashHeight = 2,
      this.color = Colors.grey,
      this.dashWidth = 4});
  @override
  Widget build(BuildContext context) {
    // ignore: avoid_unnecessary_containers
    return Flex(
        direction: axis,
        mainAxisAlignment:MainAxisAlignment.spaceBetween,
        children: List.generate(count, (index) {
          return SizedBox(
            width: dashWidth,
            height: dashHeight,
            child: DecoratedBox(
              decoration: BoxDecoration(color: color),
            ),
          );
        }));
  }
}

底部导航栏

底部导航：和body同级的一个属性：bottomNavigationBar

路由切换：body属性使用IndexedStack

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import './home/home.dart';
import './mine/mine.dart';

class YJBMainPage extends StatefulWidget {
  const YJBMainPage({Key? key}) : super(key: key);

  @override
  State<YJBMainPage> createState() => _YJBMainPageState();
}

class _YJBMainPageState extends State<YJBMainPage> {
  int tabIndex = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: IndexedStack(
          index: tabIndex,
          // ignore: prefer_const_literals_to_create_immutables
          children: [YJBHmoe(), YJBMine()],
        ),
        bottomNavigationBar: BottomNavigationBar(
            currentIndex: tabIndex,
            onTap: (value) {
              // ignore: unnecessary_this
              setState(() {this.tabIndex = value;});
            },
            // ignore: prefer_const_literals_to_create_immutables
            items: [
              BottomBarItem(Icons.home,Colors.red,'HOME'),
              BottomBarItem(Icons.person, Colors.red, 'MINE'),
            ]));
  }
  // ignore: non_constant_identifier_names
  BottomNavigationBarItem BottomBarItem(iconType,color,text) {
    return BottomNavigationBarItem(
        icon: Icon(iconType),
        activeIcon: Icon(iconType,color: color,),
        label: text);
  }
}

墨痕留绝

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Dart&Flutter基础学习日记

Dart语法每段语气都需要逗号隔开定义变量Dart用两种定义变量的方式，第一种明确变量类型定义，第二种通过推导类型定义通过数据类型定义变量，dart的数据类型有：数字（int/double），字符串(String)，布尔(Boolean)，列表，集合(Set)，映射(Map)，符文。一：使用变量类型定义入口函数mainvoid main(List<String> args) { int firstFlutterCode = 12; print(firstFlutterCo
复制链接

扫一扫

专栏目录