🧑‍🏫06. Class

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

Простое объяснение с примером

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

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

Что содержит класс?

Класс описывает свойства (переменные) и методы (функции), которые эти объекты могут использовать.

1. Свойства — это данные, которые хранятся в объекте. Например, если у нас есть класс Car (машина), то свойствами могут быть color (цвет), speed (скорость), brand (марка).

2. Методы — это действия или функции, которые объект может выполнять. Например, drive() (ехать) и stop() (остановиться).

Как создать класс?

В Flutter (и языке Dart) класс создается с помощью ключевого слова class, а внутри него описываются свойства и методы.

Пример класса

Давай создадим класс Car, который описывает машину.

dartКопировать кодclass Car {
  // Свойства
  String color;
  int speed;

  // Конструктор
  Car(this.color, this.speed);

  // Метод
  void drive() {
    print('Машина едет со скоростью $speed км/ч');
  }

  void stop() {
    print('Машина остановилась');
  }
}

• String color; и int speed; — это свойства класса Car.

• Car(this.color, this.speed); — это конструктор. Конструктор позволяет создавать экземпляр класса и задавать значения свойств при создании объекта.

• Методы drive() и stop() описывают действия, которые может выполнять машина.

Как создать объект класса?

После создания класса мы можем создать объект на его основе. Это называется экземпляр класса.

dartКопировать кодvoid main() {
  // Создаем объект класса Car
  Car myCar = Car('Красный', 120);

  // Используем свойства и методы объекта
  print('Моя машина имеет цвет: ${myCar.color}');
  myCar.drive(); // Выведет: Машина едет со скоростью 120 км/ч
  myCar.stop();  // Выведет: Машина остановилась
}

Здесь мы создали объект myCar, указали для него цвет и скорость, а затем вызвали его методы drive() и stop().

Зачем нужен класс?

Классы удобны, когда нужно описывать похожие объекты и работать с ними. С помощью классов можно:

1. Упрощать код: один класс можно многократно использовать для создания множества объектов.

2. Организовывать данные: объекты классов содержат все нужные данные и действия внутри себя.

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

Аналогия: класс как шаблон

Класс — это как рецепт для приготовления блюда. Рецепт описывает, какие ингредиенты нужны (свойства) и какие шаги нужно выполнить (методы), чтобы приготовить блюдо. Но сам по себе рецепт не является блюдом, это просто описание. Когда ты готовишь по этому рецепту, ты создаешь конкретное блюдо — экземпляр рецепта. Так же и с классами: класс описывает, что должен содержать и как должен работать объект, но объект создается только при его использовании.

Пример:

давай создадим пример с использованием списка объектов продуктов и экраном деталей для каждого продукта. Мы сделаем два экрана:

1. ProductListScreen — экран, где отображается список продуктов.

2. ProductDetailScreen — экран с подробной информацией о выбранном продукте.

Предположим, что у нас есть класс Product, описывающий каждый продукт.

Шаг 1: Создадим класс Product

Этот класс будет содержать свойства, такие как name, price, description, и imageUrl, чтобы описывать продукт.

class Product {
  final String name;
  final double price;
  final String description;
  final String imageUrl;

  Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
  });
}

Шаг 2: Создадим список объектов Product

Теперь создадим несколько объектов Product и поместим их в список. Это будет наш "каталог товаров".

List<Product> products = [
  Product(
    name: 'Apple',
    price: 1.99,
    description: 'Fresh red apples',
    imageUrl: 'https://example.com/apple.png',
  ),
  Product(
    name: 'Banana',
    price: 0.99,
    description: 'Yellow bananas, rich in potassium',
    imageUrl: 'https://example.com/banana.png',
  ),
  Product(
    name: 'Orange',
    price: 1.49,
    description: 'Juicy oranges full of vitamin C',
    imageUrl: 'https://example.com/orange.png',
  ),
];

Шаг 3: Создадим экран списка продуктов (ProductListScreen)

На этом экране мы отобразим ListView со всеми продуктами. При нажатии на продукт будет открываться ProductDetailScreen.

import 'package:flutter/material.dart';

class ProductListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Products')),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return ListTile(
            leading: Image.network(product.imageUrl, width: 50, height: 50),
            title: Text(product.name),
            subtitle: Text('\$${product.price}'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ProductDetailScreen(product: product),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

Здесь:

• Используем ListView.builder для отображения списка продуктов.

• Для каждого элемента ListTile отображает название, цену и изображение продукта.

• onTap открывает ProductDetailScreen и передает выбранный продукт.

Шаг 4: Создадим экран деталей продукта (ProductDetailScreen)

Этот экран будет принимать объект Product и показывать его полную информацию.

class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Image.network(product.imageUrl, height: 150),
            ),
            SizedBox(height: 16),
            Text(
              product.name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              '\$${product.price}',
              style: TextStyle(fontSize: 20, color: Colors.green),
            ),
            SizedBox(height: 16),
            Text(
              product.description,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

Здесь:

• ProductDetailScreen принимает объект Product через параметр product.

• Показываются все детали продукта: изображение, название, цена и описание.

Итоговый код

Объединим все части кода в один пример:

import 'package:flutter/material.dart';

// Модель Product
class Product {
  final String name;
  final double price;
  final String description;
  final String imageUrl;

  Product({
    required this.name,
    required this.price,
    required this.description,
    required this.imageUrl,
  });
}

// Список продуктов
List<Product> products = [
  Product(
    name: 'Apple',
    price: 1.99,
    description: 'Fresh red apples',
    imageUrl: 'https://example.com/apple.png',
  ),
  Product(
    name: 'Banana',
    price: 0.99,
    description: 'Yellow bananas, rich in potassium',
    imageUrl: 'https://example.com/banana.png',
  ),
  Product(
    name: 'Orange',
    price: 1.49,
    description: 'Juicy oranges full of vitamin C',
    imageUrl: 'https://example.com/orange.png',
  ),
];

// Экран списка продуктов
class ProductListScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Products')),
      body: ListView.builder(
        itemCount: products.length,
        itemBuilder: (context, index) {
          final product = products[index];
          return ListTile(
            leading: Image.network(product.imageUrl, width: 50, height: 50),
            title: Text(product.name),
            subtitle: Text('\$${product.price}'),
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ProductDetailScreen(product: product),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

// Экран деталей продукта
class ProductDetailScreen extends StatelessWidget {
  final Product product;

  ProductDetailScreen({required this.product});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(product.name)),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Center(
              child: Image.network(product.imageUrl, height: 150),
            ),
            SizedBox(height: 16),
            Text(
              product.name,
              style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 8),
            Text(
              '\$${product.price}',
              style: TextStyle(fontSize: 20, color: Colors.green),
            ),
            SizedBox(height: 16),
            Text(
              product.description,
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

void main() => runApp(MaterialApp(
  home: ProductListScreen(),
));

Описание работы

1. ProductListScreen — показывает список продуктов.

2. При нажатии на продукт открывается ProductDetailScreen.

3. ProductDetailScreen показывает подробную информацию о выбранном продукте.

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