Фактический бой Flutter создает приложение «изолированный остров» с нуля (№ 4, популярное, лайки, анимация)

предисловие

Когда вы видите эту статью, это уже день в 2020 году, и с тех пор не будет 2019 года. Я не знаю, сколько вы приобрели в этом году.Я также очень благодарен, что вы можете открыть лучший подарок, который я дал вам в конце года.Я должен сказать, что вы целеустремленный человек.

Прежде всего, есть две вещи, которым можно порадоваться.

1. Я себе добавил большой Эту статью можно разместить на одном экране без прокрутки

   

   Правильно, этоBENQ 明基的BL2480TПочему я чувствую себя UP из коробки, у меня все хорошо в выходные, я даже посмотрел обмен наггетс, я взломал

2. Во-вторых, у меня на обоих устройствах установлен виджет с изображениями.

Это очень полезно, если вы долго пишете статьи, это может повысить эффективность.MacВерхняя частьuPic

На самом деле, я хотел что-то написать, но остановился, главная причина — мой компьютер.小MacЭтой машине 12-13 лет, приложение Flutter не открывается, оно очень зависло, надеюсь, в 2020 году смогу сделать его своими руками, писать статьи и добавлять его вручную.Резюме фронтенд-аутсайдера за 2019 год | Ежегодный очерк Nuggetsздесь

Обзор последнего номера

Ближе к дому (не знаю, почему мне всегда нравится говорить о чем-то другом), это как написать очень практическую статьюflutter状态管理相关的 文章Кажется, ее мало кто читает, это слишком далеко, но не волнуйтесь, эта статья все еще очень сухая.

читать отзывы

• Теру Таро 2019

  • Среди них он сказал:

    Изменилось место, изменилось название пакета search_widget, рекомендуется обновить официальное описание плагина

    

    Universal.dev/packages/Color...Пакет импорта Import Import ': search_widget / search_widget.dart';

  Я написал модуль поиска в то время с помощью стороннего пакета, но в реальной разработке я до сих пор стараюсь писать базовые модули вручную, такие как поиск в AppBar, или поиск по странице, он есть в совместном использовании поиска , местами ошибки, спасибо за исправление

• yj0099

  • Среди них он сказал:

    Например, я только недавно начал смотреть флаттер, и дротик действительно может это сделать. Но стиль матрешки флаттера действительно убедил меня бросить курить.

    В первую очередь очень благодарна за самоутверждение, в контакте много людей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Шерстяная ткань

ожидаемый эффект

фактический эффект

начать обучение

Оставшаяся проблема

• Во-первых, после того, как мы клонировали на складе, обнаружили, что код неполный, только4 commitsЭто должно быть моей собственной причиной отказа от синхронизации кода

• Вторая проблема — клонировать код, запустить его и сообщить об ошибке

Не паникуйте, если у вас возникнут проблемы.В этой главе я разберусь с проектом, а затемcloneС кодом проблем не будет, те, кто читал предыдущие статьи, должны знать, что когда я создавал проект, Flutter SDK был еще1.9+版本, то буквально несколько дней назад его долгожданное обновление не разочаровало разработчиков, в том числеHOT UIПодождите, в Интернете есть большие ребята, которые делятся некоторыми новыми вещами, поэтому я не буду много болтать по этой дороге.

• Flutter-версия текущего проекта

• Вы можете клонировать код напрямую

Повторный анализ данных Дио

в предыдущем посте

Настоящий бой Флаттера, приложение «остров» с нуля (№ 3, список книг, окно поиска, предварительное исследование Дио)

Мы кратко проанализировали данные Дио, пока не паникуйте, вот предзнаменование, т.е.Json to Dart, Те, кто был в контакте с разработкой флаттера, возможно, уже знают, что это очень запутанный шаг, преобразование данных json в классы моделей, что касается того, как добиться этого за один шаг, дурацкое преобразование и использовать его напрямую, как в веб-разработке использовать фон напрямую Нельзя ли вернуть 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Создайте новый файл лайка в папке, чтобы поставить подобный эффект

Используйте ярлыки редактора для создания новых фрагментов

Здесь вы можете перейти к другим моим статьям, а также упомянуть некоторые часто используемые сочетания клавиш.

Анимация

контроллер

Контроллеры по-прежнему очень распространены в приложениях, включая такие вещи, как ввод текста и виджеты прокрутки, поэтому анимация не является исключением.

• Инициализировать контроллер

   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предыдущее открытое колесо

• имя пакета :like_button
• Версия: 0.1.9
• Частота обновления

  

  Частота обновлений по-прежнему очень хорошая.
• китайский документLike Button Библиотека Flutter, поддерживающая твит-подобные эффекты и анимацию подсчета лайков.Узнал со склада, что этоFlutterCandiesРаботы на складе охраняют несколько начальников, и документы тоже очень подробные.

Обзор сообщества

Итак, как мы его используем?После введения пакета просто используйте его так

return Scaffold(
        appBar: AppBar(),
        body: Container(
          child: Center(
            child: LikeButton(),
          ),
        ));

Синхронизация кода с демоНравится демо

Отдельное спасибо

• Маленькие булочки — простая в использовании рекомендация Flutter по колесу 2 — Нравится анимация кнопки