Напишите настольное приложение Moyu на Flutter за 10 минут

внешний интерфейс Flutter
Напишите настольное приложение Moyu на Flutter за 10 минут

Привет всем, я Алекс, у меня всего 24 часа в сутки, но 25 часов интенсивной учебы.

причина

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

ПроисхождениеГо Лаоподелился твитом:поделиться.API.Weibo.cai/share/26900…

image-20211217002031951

Внезапно мне в голову пришла такая мысль:Хороший материал, но я на MacBook и не могу использовать это приложение. Но, похоже, я могу написать один сам?

Готов к работе

Самое главное, что нужно молодежи, это действие, а я могу делать то, что хочу.Хотя я сейчас подправляю речь на DevFest, это не мешает мне написать приложение за 10 минут. Итак, я нанес серию комбо-ударов:

  • flutter config --enable-macos-desktop
  • flutter create --platforms=macos touch_fish_on_macos

Создан проект Flutter, поддерживающий macOS. (На данный момент прошло около 1 минуты)

начать печатать

найти ресурсы

Сначала нам нужно изображение высокой четкости и незакодированное изображение , здесь вы можете выполнить поиск в Интернете, следует отметить, что при использовании ЛОГОТИПА вы должны обратить внимание на проблемы с авторскими правами, вызванные сценой использования. После того, как найдёте картинку, бросьте еёassets/apple-logo.pngи добавьте ссылку на ресурс в pubspec.yaml:

flutter:
  use-material-design: true
+ assets:
+   - assets/apple-logo.png

Подумайте о макете

Давайте посмотрим на экран Splash MacOS, есть несколько ключевых точек:

image-20211217003055127

  • Логотип находится в середине экрана, а фиксированный размер составляет около 100 д.;
  • Интервал между ЛОГОТИПОМ и индикатором выполнения составляет около 100 dp;
  • Индикатор выполнения имеет высоту около 5 dp и ширину около 200 dp, закругленные углы почти полностью покрывают высоту, часть значения белая, а часть фона — цвет заливки + светло-серая рамка.

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

После подтверждения общего шаблона макета приступаем к построению макета. (К этому моменту прошло около 2 минут)

реализовать макет

Во-первых, отцентрируйте логотип, раскрасьте его, установите ширину на 100 и разместите верх и низ на 100:

return Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      const Spacer(),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 100),
        child: Image.asset(
          'assets/apple-logo.png',
          color: CupertinoColors.white, // 使用 Cupertino 系列的白色着色
          width: 100,
        ),
      ),
      const Spacer(),
    ],
  ),
);

Затем поместите относительно верхний индикатор выполнения ниже:

return Center(
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
      const Spacer(),
      Padding(
        padding: const EdgeInsets.symmetric(vertical: 100),
        child: Image.asset(
          'assets/apple-logo.png',
          color: CupertinoColors.white, // 使用 Cupertino 系列的白色
          width: 100,
        ),
      ),
      Expanded(
        child: Container(
          width: 200,
          alignment: Alignment.topCenter, // 相对靠上中部对齐
          child: DecoratedBox(
            border: Border.all(color: CupertinoColors.systemGrey), // 设置边框
            borderRadius: BorderRadius.circular(10), // 这里的值比高大就行
          ),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(10), // 需要进行圆角裁剪
            child: LinearProgressIndicator(
              value: 0.3, // 当前的进度值
              backgroundColor: CupertinoColors.lightBackgroundGray.withOpacity(.3),
              color: CupertinoColors.white,
              minHeight: 5, // 设置进度条的高度
            ),
          ),
        ),
      ),
    ],
  ),
);

На данный момент вы можете работать напрямую, и статический интерфейс подготовлен. (На данный момент прошло около 4 минут)

Откройте приложение, вы можете отложить его и повесить трубку, босс подходит к вам и может поболтать с вами об обновленном контенте.Однако интерфейс обновления никуда не денется, можно ли его назвать интерфейсом обновления?Когда начальник снова и снова проходит мимо вас и обнаруживает, что прогресс все тот же, возможно, он уже списан с вашей зарплаты, или вас уволили на следующий день за то, что вы зашли в офис и сели на стул.

Итак, следующий шаг — подумать о том, как заставить его двигаться.

анимация мышления

Давайте посмотрим, как выглядит анимация запуска:

Kapture 2021-12-17 at 00.51.40

  • В начале нет индикатора выполнения;
  • Полоса прогресса будет двигаться шаг за шагом, и скорость может не совпадать.

Основываясь на двух вышеуказанных условиях, я разработал метод обработки анимации:

  • Длительность построения сегментов (Duration), которые можно свободно комбинировать по нескольким продолжительностям;
  • Количество длительностей прохождения анимации определяет окончательный прогресс каждой длительности;
  • Каждая продолжительность управляет интервалом от начального значения до конечного значения.

Есть только три условия, так же просто, как взлететь и начать! (на данный момент прошло около 5 минут)

реализовать анимацию

начать одинAnimationController:

class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
  /// 巧用 late 初始化，节省代码量
  late final AnimationController _controller = AnimationController(vsync: this);

  /// 启动后等待的时长
  Duration get _waitingDuration => const Duration(seconds: 5);

  /// 分段的动画时长
  List<Duration> get _periodDurations {
    return <Duration>[
      const Duration(seconds: 5),
      const Duration(seconds: 10),
      const Duration(seconds: 4),
    ];
  }

  /// 当前进行到哪一个分段
  final ValueNotifier<int> _currentPeriod = ValueNotifier<int>(1);

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

@override
void initState() {
  super.initState();
  // 等待对应秒数后，开始进度条动画
  Future.delayed(_waitingDuration).then((_) => _callAnimation());
}

Future<void> _callAnimation() async {
  // 取当前分段
  final Duration _currentDuration = _periodDurations[currentPeriod];
  // 准备下一分段
  currentPeriod++;
  // 如果到了最后一个分段，取空
  final Duration? _nextDuration = currentPeriod < _periodDurations.length ? _periodDurations.last : null;
  // 计算当前分段动画的结束值
  final double target = currentPeriod / _periodDurations.length;
  // 执行动画
  await _controller.animateTo(target, duration: _currentDuration);
  // 如果下一分段为空，即执行到了最后一个分段，重设当前分段，动画结束
  if (_nextDuration == null) {
    currentPeriod = 0;
    return;
  }
  // 否则调用下一分段的动画
  await _callAnimation();
}

Приведенные выше несколько строк кода прекрасно реализуют анимацию индикатора выполнения. (На данный момент прошло около 8 минут)

Последний шаг — привязать анимацию и сегмент к индикатору выполнения, индикатор выполнения не отображается до ввода сегмента, а соответствующий прогресс отображается после запуска анимации:

ValueListenableBuilder<int>(
  valueListenable: _currentPeriod,
  builder: (_, int period, __) {
    // 分段为0时，不展示
    if (period == 0) {
      return const SizedBox.shrink();
    }
    return DecoratedBox(
      decoration: BoxDecoration(
        border: Border.all(color: CupertinoColors.systemGrey),
        borderRadius: BorderRadius.circular(10),
      ),
      child: ClipRRect(
        borderRadius: BorderRadius.circular(10),
        child: AnimatedBuilder( // 使用 AnimatedBuilder，在动画进行时触发更新
          animation: _controller,
          builder: (_, __) => LinearProgressIndicator(
            value: _controller.value, // 将 controller 的值绑定给进度
            backgroundColor: CupertinoColors.lightBackgroundGray.withOpacity(.3),
            color: CupertinoColors.white,
            minHeight: 5,
          ),
        ),
      ),
    );
  },
)

Готово, всего 10 минут, побегаем посмотрим эффект. (Рисунок 22.1 М ниже)

Kapture 2021-12-17 at 01.15.08

Эта степень реставрации, кого она не смущает? 🤩С этого момента начните дорогу на работу на рыбалку...

Релиз пакета

Выпустить официальную версию приложения для macOS сложнее, но мы можем упаковать ее для собственного использования, и для этого потребуется всего одна строка команды:flutter build macos.

После успеха продукт будет выводиться вbuild/macos/Build/Products/Release/touch_fish_on_macos.app, дважды щелкните, чтобы использовать.

Эпилог

На данный момент разработано простое приложение Moyu Flutter, которое может работать на macOS. Полная демонстрация доступна в моем репозитории:GitHub.com/Alex V525/legal…. Вы можете дать ему некоторые требования, я думаю, что такое программное обеспечение довольно интересно.

Большинство людей, возможно, не думали, что написать приложение Flutter, работающее на macOS, может быть так просто. Конечно, в кажущиеся короткими 10 минут не входило время на установку окружения, поиск материалов и отправку в git, но за это время их было более чем достаточно для выполнения сопутствующих вещей.

Я надеюсь, что эта статья пробудит ваш интерес к изучению флаттера, или к попытке попробовать его на рабочем столе, или бросит вызов вашей собственной скорости программирования (не говорите, что 10 минут невозможно, на самом деле мне нужно меньше времени.

Если у вас есть какие-либо вопросы, связанные с Flutter, добро пожаловать на общение со мной в области комментариев, и все приветствуются.Присоединяйтесь к самой активной группе Flutter (FlutterCandies🍭)Напрямую связывайтесь с большинством авторов высококачественного контента Flutter в Китае (включая меня), Олли!

вдохновленный

Категории