Flutter - альтернативный дизайн, повышение эффективности разработки страницы, упрощение прыжков и пропусков

Flutter

начало

Несколько дней назад большой мужчина проверил меня и сказал:

flutter页面开发需要写StatefulWidget和State,Android只需要Activity,
如何简化这种开发方式?

Я ответил:

activity还需要写xml呢~

В тишине босса со всех сторон раздались теплые аплодисменты...

......

Поздней ночью под эстакадой я ворочался, не мог уснуть...

'Неужели это действительно возможно? '...

После неоднократных осмотров и полировки это «колесо» действительно немного круглое, и оно довольно гладко «катится».

天桥之下难免简陋,如有不足还请海涵,万望指点~ 嘿嘿 

идея

Обычно мы разрабатываем страницу A со следующей структурой:

class A extends StatefulWidget{
}

class AState extends State<A>{
}

В то же время, чтобы разделить и унифицировать маршрутизацию, мы используем метод перехода на страницу (т.е. статическую маршрутизацию):

Navigator.of(context).pushName('/a')

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

Повторное наблюдение и размышление привели к следующей структурной схеме.

Структурная схема

Краткое введение в каждый модуль

BaseState

abstract class BaseState<T extends StatefulWidget> extends State<T>{}

Страница и просмотр пакета универсального функционала

WidgetState

abstract class WidgetState extends BaseState with WidgetGenerator{}

Общая инкапсуляция функций для пользовательского представления

PageState

abstract class PageState extends BaseState with WidgetGenerator,RouteAware{}

Общая инкапсуляция функций для пользовательской страницы

RouteAware对路由观测,你可以埋点或者记录等等

WidgetGenerator

mixin WidgetGenerator on BaseState implements _RouteGenerator,_NavigateActor{}

Создание виджетов и сборка функций для виджетов

_RouteGenerator 生成Route(可带过渡动画)功能

  PageRoute<T> buildRoute<T>(Widget page, String routeName, {PageAnimation animation, Object args}) {
				....
  }

_NavigateActor 路由的各种push和pop操作,你也可以拓展

  Future push<T extends PageState>(T page,{PageAnimation animation});
  Future pushAndRemoveUntil<T extends PageState>(T page,{PageAnimation animation,RoutePredicate predicate});
  Future pushReplacement<T extends Object,TO extends PageState>(TO page, {PageAnimation animation, T result });

  void pop<T extends Object>({T result,});
  void popUntil({RoutePredicate predicate});

  bool canPop();

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

как использовать

разработка страницы

Когда нам нужно разработать страницу А, следующим образом:

clas A extends PageState{
   Widget build(BuildContext context){...}
}

Это так просто.

стоимость страницы

Когда мы хотим передать значение на страницу B/вернуть значение на страницу A, следующим образом:

clas B extends PageState{
	final var value;
    B(this.value);

   Widget build(BuildContext context){...}
}

A跳到B
A页面内:push(B('你的值'))
			.then((value)=>'B返回值=$value');

B退到A
B页面内:pop(result:'返回给A的值');

Использование pushAndRemoveUntil

Если я хочу удалить B и C, когда я перехожу от A к B к C, а затем от C к D, операция выглядит следующим образом:

在C页面

push(D(),predicate: (route)=>route.settings.name == '$A')

D页面

当你pop()后,你会发现到了A页面

частичное обновление

Вы можете обновить с любой степенью детализации без каких-либо инструментов.Операция выглядит следующим образом.

假设widget a, 我们调用
a.refreshState()  即可对a进行刷新

但并不意味着,就可以抛弃Provider,redux等库

Поскольку состояние открыто для внешнего мира, вы также можете делать более эффектные операции~~~

создать виджет

Мне не нужно прыгать, но мне нужно сгенерировать виджеты со своей страницы/представления.Операция выглядит следующим образом:

你的页面/View.generateWidget({Key key}) 就可以生成一个widget了
如果需要key,还可以加上一个

наконец

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

Однако это пока первое издание.

Вы можете использовать его в следующей структуре, чтобы увидеть, есть ли какие-либо недостатки или ошибки, и сообщить мне.Большое спасибо.

Коренная рама

Базовая структура разработки