Flutter實戰 從頭擼一個「孤島」APP（No.四、流行、點贊、動畫）

時間  2020-01-07
標籤 flutter 實戰 從頭 一個 孤島 app 流行 動畫 简体版
原文   原文鏈接

前言

當你看到這篇文章的時候，已是2020的某一天，今後之後再無2019。不知道這一年來你收穫了多少呢，我也十分感謝你能打開這份年底我予你最好的禮物，不得不說你是個上進的人前端

首先值得開心的有兩件事git

  1. 我給本身添了個大件 這看文章，一屏就能放下，不用滾動 github

    lrgujO.md.jpg
    沒錯這款就是 BENQ 明基的BL2480T 我怎麼感受我像個開箱的UP，週末沒事，我還看了看掘金大佬們的分享，我裂開了

  2. 第二件事，就是我在 兩臺設備上都裝了圖牀小工具json

這個很好用，對於時長寫文章的話，能提升些效率，Mac 上裝的是uPicapp

其實本身想寫點東西，又中斷，主要緣由是本身的那臺小Mac 是12-13年的機子，Flutter 應用是打不開的，很卡很卡，指望本身在2020年能DIY一臺，專門寫文章，手動加到 一位前端弱者的2019年總結|掘金年度徵文 這裏編輯器

上期回顧

言歸正傳（不知道爲何總喜歡扯點別的），就像寫的一篇很實用的flutter狀態管理相關的 文章 好像並無多少閱讀量，扯的太遠，不過你放心，這篇依然是很乾ide

讀讀評論

  • 輝太郎2019svg

    • 其中他是這樣說的：工具

      有個地方變了，search_widget的包名變了，建議更新下 插件官方說明 佈局

      https://pub.dev/packages/search_widget
      pub.dev/packages/se… 引入方式 import 'package:search_widget/search_widget.dart';

    當時寫的一個搜索模塊，是藉助第三方的包，不過在實際開發中仍是儘可能手寫比較基礎的模塊，好比AppBar搜索，或者頁面中的搜索，正是在搜索的分享中，有的地方有點錯誤，謝謝指正

  • yj0099

    • 其中他是這樣說的：

      贊，最近剛開始看flutter，dart真的能夠。可是flutter的套娃寫法真的有點把我勸退了

      首先仍是很感謝對本身的確定，有不少人接觸flutter 的時候，老是說嵌套地獄，怕了怕了，筆者倒沒有以爲有這個問題啊，

      打個比方，咱們要寫一個佈局，要換一種思惟來寫，從小部件來出發

      // 我是第一行
  Widget _firRow() => Container(
          child: Row(
        children: <Widget>[
          Text('我是第一行'),
        ],
      ));

  // 我是第二行
  Widget _SecRow() => Container(
          child: Row(
        children: <Widget>[
          Text('我是第er行'),
        ],
      ));

  // 我是第三行
  Widget _ThrRow() => Container(
          child: Row(
        children: <Widget>[
          Text('我是第er行'),
        ],
      ));

  // 我是三行的彙總
  Widget _all() => Container(
        child: Column(
          children: <Widget>[
            // 第一行
            _firRow(),
            // 第二行
            _SecRow(),
            // 第三行
            _ThrRow()
          ],
        ),
      );
複製代碼

這也是我實際開發中的模式，因此也沒以爲有嵌套的問題，反而以爲寫起來很舒服，我還特意的 看了下，關注者，

不知你是否是101呢

期待效果

lrgNgf.md.png

實際效果

開始操練

遺留問題

  • 首先，我們克隆下倉庫以後，發現，代碼是不徹底的，只有4 commits 這應該是我本身的緣由 沒有把代碼同步上去

  • 第二個問題是克隆下來代碼，run 了一下是報錯誤的

lrcqBQ.md.png

遇到問題莫要慌張，本章節，我會整理一下項目，再clone 代碼就不會有問題了，看過前幾篇文章的應該知道，在我建立項目的時候，Flutter SDK 仍是1.9+版本，那麼就在前幾天不久前，它翹首以盼的更新了，大致沒有讓開發者失望，包括HOT UI 等，網上有大佬分享出一些新的東西，這段路就很少作嘮

  • 當前項目的flutter 版本

  • 當前直接克隆代碼就可

Dio數據再分析

在上一篇的時候

Flutter實戰 從頭擼一個「孤島」APP（No.三、書單、搜索框、Dio初探）

咱們簡單的分析了一下Dio的數據，此時不要慌，這裏先埋下一個伏筆，那就是Json to Dart, 接觸過flutter 開發的可能已經知道了那就是很犯迷糊的一步，把json數據轉爲Model類，至於怎麼才能一步到位，傻瓜式轉換，拿來直接用，那像Web 開發中，直接用後臺返回json 不行嗎，爲何還要轉化，我們留到下一段旅程

流行、點贊

本篇我們就來先看一下首頁（流行）模塊的點贊效果，首先仍是先初始化一行（頭部）

body: SingleChildScrollView(
          child: Flex(
            direction: Axis.vertical,
            children: <Widget>[
              Container(
                child: _like(),
              )
            ],
          ),
        )
複製代碼
// 點贊 第一行
  Widget _like() => Container(
        child: Row(
          children: <Widget>[
            Container(
              width: width750,
              height: height100,
              decoration: BoxDecoration(
                  border: Border.all(width: 1, color: Colors.red)),
              child: Text('頭部'),
            )
          ],
        ),
      );
複製代碼

這樣是否是就不怎麼嵌套了呢，就像開頭說起的那樣，而後在widgets文件夾下新建一個點讚的 文件，用來放點讚的效果

使用編輯器的快捷方式來新建代碼段

這裏你能夠去翻下個人其餘文章，也有提到一些經常使用的快捷鍵

動畫Animation

控制器

控制器在應用中仍是很常見的，包括像文本輸入、還有滾動部件，那麼動畫固然也不例外

  • 初始化控制器

    AnimationController _animationController; // 
複製代碼

  • 初始化控制器

    void initState() {
    super.initState();
    _animationController = AnimationController(
      
    );
  }
複製代碼

那麼有個問題 咱們怎麼知道有什麼值呢

AnimationController({
    double value,
    this.duration, // 時長
    this.reverseDuration,
    this.debugLabel,
    this.lowerBound = 0.0, // 開始的值
    this.upperBound = 1.0, // 結束的值
    this.animationBehavior = AnimationBehavior.normal,
    @required TickerProvider vsync,
  }) : assert(lowerBound != null),
       assert(upperBound != null),
       assert(upperBound >= lowerBound),
       assert(vsync != null),
       _direction = _AnimationDirection.forward {
    _ticker = vsync.createTicker(_tick);
    _internalSetValue(value ?? lowerBound);
  }

複製代碼

以上咱們能夠簡單的看下

  • 開始播放動畫

    _animationController.forward();


複製代碼

  • 銷燬無用的控制器

    @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }
複製代碼

完整代碼

import 'package:flutter/material.dart';
import 'package:lsolated_island_app/utils/global.dart';

class WidgetLike extends StatefulWidget {
  WidgetLike({Key key}) : super(key: key);

  @override
  _WidgetLikeState createState() => _WidgetLikeState();
}

class _WidgetLikeState extends State<WidgetLike> with TickerProviderStateMixin {
  AnimationController _animationController; // 動畫控制器
  Animation _animationSize; // 大小
  Animation _animationColor; // 顏色
  CurvedAnimation _curvedAnimation;

  // 初始化
  @override
  void initState() {
    super.initState();

    _animationController = AnimationController(
      // value: 20.0, //
      // lowerBound: 20.0,
      // upperBound: 100.0,
      duration: Duration(milliseconds: 1000), // 持續的時長
      vsync: this, // 每一幀的反應 一秒60 this 當前對象
    );

    _animationSize =
        Tween(begin: 30.0, end: 100.0).animate(_animationController);

    // // 監聽
    _animationController.addListener(() {
      // print('${_animationController.value}');
      setState(() {});
    });
    // 開始播放動畫
    // _animationController.forward();
    // // 設置動畫的範圍

    _animationColor = ColorTween(begin: Colors.red, end: Colors.red[900])
        .animate(_animationController);

    _curvedAnimation = CurvedAnimation(
        parent: _animationController, curve: Curves.bounceOut); // 動畫曲線

    // // 監聽狀態
    _animationController.addStatusListener((AnimationStatus status) {});
  }

  @override
  void dispose() {
    super.dispose();
    _animationController.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
        child: Column(
      children: <Widget>[
        Container(
          child: Text('${_animationController.value}'),
        ),
        Container(
          child: IconButton(
            iconSize: _animationSize.value,
            color: _animationColor.value,
            onPressed: () {
              print('點擊了');
              // _animationController.forward();

              switch (_animationController.status) {
                case AnimationStatus.completed:
                  _animationController.reverse();
                  break;
                default:
                  _animationController.forward();
              }
            },
            icon: Icon(Icons.favorite),
          ),
        )
      ],
    ));
  }
}

複製代碼

第三方輔助

固然了，經過如上咱們會對動畫有必定的理解，不過像這這種常見的效果，通常會有些對Flutter積澱的大佬們寫成共用的第三方部件，來提供開發者使用，並不斷的更新維護，可是這個也是跟狀況而定，通常移動的應用都會牽扯到包的大小，一些簡單的效果，能夠嘗試本身來寫，那麼接下來，來pub.dev 上一個開放的輪子

社區概覽

002.png

那咱們怎麼使用呢 ?引入包以後，像這樣使用一下就可

return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Center(
            child: LikeButton(),
          ),
        ));
複製代碼

代碼同步至Demo 點贊Demo

特別感謝

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程