Giới Thiệu

Mẫu thiết kế Composite đã trở thành một phần không thể thiếu trong lập trình, đặc biệt là trong việc xây dựng cấu trúc cây cho các đối tượng. Bạn đã bao giờ tự hỏi tại sao một thư mục có thể chứa nhiều thư mục khác và tệp tin? Câu trả lời nằm ở việc mẫu thiết kế Composite giúp đơn giản hóa việc tổ chức và quản lý các đối tượng phức tạp. Mẫu thiết kế này cho phép chúng ta xử lý các lớp riêng lẻ và nhóm các đối tượng theo cùng một cách.

Composite Là Gì?

Composite là một mẫu thiết kế thuộc structural, cho phép tạo ra một cấu trúc phân cấp bậc. Với tiêu chí "Chúng sinh bình đẳng", mỗi thành phần (component) đều được xử lý một cách đồng nhất bằng cách thực hiện giao diện được định nghĩa trước. Mẫu thiết kế này làm tăng tính linh hoạt và dễ dàng quản lý các đối tượng trong chương trình của bạn.

Mục Tiêu Của Mẫu Thiết Kế Composite

Mẫu thiết kế Composite ra đời với những mục tiêu chính sau:

Đơn Giản Hóa Việc Quản Lý Đối Tượng: Tổ chức các đối tượng theo cấu trúc cây giúp cho việc quản lý trở nên dễ dàng hơn, đặc biệt trong các cấu trúc dữ liệu phức tạp.
Sự Đồng Nhất Trong Xử Lý Đối Tượng: Giúp đảm bảo tất cả các đối tượng được xử lý theo cùng một cách, tạo sự nhất quán trong ứng dụng.
Làm Giảm Khối Lượng Mã Code: Tách biệt các lớp lớn thành những lớp nhỏ hơn để nâng cao tính dễ đọc, dễ hiểu và dễ bảo trì cho các lập trình viên kế tiếp.

Sơ Đồ Lớp Của Mẫu Thiết Kế Composite

Mẫu thiết kế Composite có thể được biểu diễn bằng sơ đồ lớp bao gồm các thành phần chính:

Component: Đây là интерфейс hoặc lớp trừu tượng đại diện cho một lớp thành phần, định nghĩa các phương thức chung cho các đối tượng.
Leaf: Lớp kế thừa từ Component, chỉ chứa các đối tượng riêng lẻ (không có con).
Composite: Lớp này sẽ chứa các đối tượng khác (cả Leaf và Composite).

Ứng Dụng Mẫu Thiết Kế Composite

Mẫu thiết kế Composite sẽ rất hữu ích trong các trường hợp mà bạn có cấu trúc đối tượng theo dạng cây. Nếu bạn làm việc với các nhóm, danh mục hoặc bộ sưu tập, đây là một mẫu thiết kế bạn nên cân nhắc. Thách thức lớn nhất của mẫu này là biết khi nào và ở đâu áp dụng nó.

Thực Hành Triển Khai Mẫu Thiết Kế Composite Trong Flutter

Một ví dụ thực tế sẽ là cấu trúc cây Widget trong Flutter. Trong đó:

Component: Là một Widget.
Composite: Là widget chứa các widget con như: Column, Row, Wrap, Stack.
Leaf: Là các widget không chứa bất kỳ widget con nào, như Text, Icon, Image.

Ví Dụ Thực Tế Từ Thương Mại Điện Tử

Giả sử trong một ứng dụng thương mại điện tử, chúng ta có các danh mục sản phẩm phân cấp. Một danh mục có thể chứa nhiều danh mục con và sản phẩm khác nhau:

Copy

static List<Component> categories = [
    Category(
      name: 'Thời trang',
      children: [
        Category(
          name: 'Thời trang nam',
          children: [
            Product(name: 'Quần què', price: 1000000),
            Product(name: 'Quần tây', price: 200000),
          ],
        ),
        Category(
          name: 'Thời trang nữ',
          children: [
            Product(name: 'Váy bầu', price: 500000),
            Product(name: 'Quần ống suông', price: 1000000),
          ],
        ),
        Product(name: 'Áo mưa siêu nhân', price: 100000),
      ],
    ),
  ];

Hiển Thị Kết Quả

Khi hiển thị danh sách sản phẩm, đừng quên tính tổng tiền mà người dùng phải trả cho sản phẩm trong giỏ hàng:

Copy

class CompositePage extends StatelessWidget {
  const CompositePage({super.key});

  @override
  Widget build(BuildContext context) {
    final components = ComponentDataSource.categories;

    return Scaffold(
        appBar: const PrimaryAppBar(
          title: 'Composite',
        ),
        body: SafeArea(
          child: SingleChildScrollView(
            child: Padding(
              padding: const EdgeInsets.all(16),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  const Text(
                    'Giỏ hàng',
                    style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 20),
                  ...components.map((category) {
                    return category.buildItem();
                  }),
                  const Divider(),
                ],
              ),
            ),
          ),
        ),
        bottomSheet: Container(
          padding: const EdgeInsets.all(16),
          width: double.maxFinite,
          child: Text('Tổng tiền: ${components.getTotalPriceFormatted()}'),
        ));
  }
}

Kết Quả Đạt Được

Kết quả cuối cùng là một ứng dụng tự tin hơn khi áp dụng mẫu thiết kế, khiến cho mã nguồn trở nên dễ tin tưởng và dễ bảo trì hơn. Bạn có thể xem lại mã nguồn trên GitHub để tham khảo thêm!

Tổng Kết

Chúng ta đã tìm hiểu cơ bản về mẫu thiết kế Composite trong Flutter. Đây là một khởi đầu có hứa hẹn cho chuỗi bài viết tiếp theo! Hãy đón chờ Tập 6: Strategy - "Chiến Lược Toàn Năng" sắp tới.
source: viblo

Hướng Dẫn Mẫu Thiết Kế Composite Trong Flutter: Chúng Sinh Bình Đẳng