Как определить абстрактный виджет?

Question

Поскольку в построении виджетов в Dart / Flutter используется подход с использованием композиционного стиля (в сочетании с тем, как работает модель с областью действия), каков хороший шаблон для разработки библиотеки объектов, инкапсулирующих виджеты?

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

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

abstract class Vehicle {
  int type;
  String name;
  Widget listWidget
  Widget editWidget
  Widget settingsWidget
}

class Truck extends Vehicle {
  type = 1
  name = "Truck"
  listWidget = ... My truck widget for within lists...
  editWidget = ... My truck edit widget ...
  settingsWidget = ... My truck settings display ...
}

class Car extends Vehicle {
  type = 1
  name = "Car"
  listWidget = ... My car widget for within lists...
  editWidget = ... My car edit widget ...
  settingsWidget = ... My car settings display ...
}

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

Когда дело доходит до отображения транспортных средств в списке (например, ListView), этот подход позволяет самому объекту определять, как он отображается в этом списке, и он может быть уникальным для каждого типа транспортного средства.

Например:

    Container(
        child: new ListView.builder(
            itemCount: items.length,
            itemBuilder: (BuildContext ctxt, int index) {
                return items[index].listWidget;
            }
        )
    )

Является ли это допустимым способом выполнения Дартс / Флаттер или есть лучший шаблон, которому следует следовать?

Я нарушаю Дарт? рекомендуемые шаблоны кодирования, чтобы каждый виджет управлял своим собственным отображением?

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

Мысли?

Answer 1

Я думаю, что вы действительно хотите что-то вроде этого, и я буду использовать код Flutter Dart вместо псевдокода:

class Vehicle extends StatelessWidget {
  final int type;
  final String name;
  final Widget list, edit, settings;

  const Vehicle({Key key, this.type, this.name, this.list, this.edit, this.settings}) : super(key: key);

  @override
  Widget build(BuildContext context) => Row(children: <Widget>[list, edit, settings]);
}

class Truck extends StatelessWidget {
  const Truck({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Vehicle(
        type: 1,
        name: 'Truck',
        list: Column(),
        edit: const Icon(Icons.edit),
        settings: Checkbox(),
      );
}

class Car extends StatelessWidget {
  const Car({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) => Vehicle(
    type: 2,
    name: 'Car',
    list: Column(),
    edit: const Icon(Icons.edit_location),
    settings: ToggleButtons(...),
  );
}

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

Очевидно, что виджеты макетов, которые я выбрал Row, Column и т. Д., Предназначены только в качестве заполнителей, но на самом деле вы можете реализовать логику макета, используя этот подход.

Я бы сказал, что это более идиоматический подход для виджетов.

---

Что касается вашего примера: вам, вероятно, не следует хранить виджеты в List при использовании ListView.builder, новы можете динамически создавать экземпляры ваших виджетов в функции builder. Это также лучше с точки зрения производительности, если вы можете использовать ListView.builder. Если вы не можете динамически создавать свои элементы, вы можете просто использовать ListView и хранить ваши виджеты в списке.

builder: () {
  if (items[index]['type'] == 'car')
    return Car(...);

  return Truck(...);
}