Flutter影院布局插件g_cinema_layout的使用

Flutter影院布局插件g_cinema_layout的使用

本库旨在为设计整个电影票购买和销售系统提供一些通用的小部件。它并没有太大的野心，只是一个概念验证，但如果这个功能能够实现，未来可能会添加更多功能，而不仅仅是影院设计。

安装

在 pubspec.yaml 文件中添加 g_cinema_layout 作为依赖项。有关如何添加依赖项的帮助，请参阅文档。

dependencies:
  g_cinema_layout: 0.0.1

使用

属性

属性 描述
rowsByLetter <Map<String, int>> 表示字母及其每行座位数的映射。
specialSeats <Map<String, List<int>>> 表示哪些行的哪些座位将是特殊座位（轮椅图标）。
blockSeats <Map<String, List<int>>> 表示哪些行的哪些座位将被阻塞或占用（不可交互）。
width <int>，小部件容器的宽度大小。
onTap <Function(String, int)>，从 BtnRow 传播的方法，获取字母和按钮编号，即行和座位。
maxZoom <double>，用于指定可以应用到视图的最大缩放级别。
color <Color>，按钮的颜色，默认为蓝色。
iconColor <Color>，未选择或阻塞图标的颜色。
toggleIcon <IconData>，表示阻塞或选中座位的图标。
toggleColor <Color>，表示阻塞或选中图标颜色。

示例代码

以下是一个完整的示例代码，展示如何使用 g_cinema_layout 插件来创建一个影院座位布局：

import 'package:flutter/material.dart';
import 'package:g_cinema_layout/g_cinema_layout.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('g_cinema_layout 示例'),
        ),
        body: Center(
          child: TheaterRows(
            // 定义座位布局
            rowsByLetter: Map.from({
              'A': 10,
              'B': 10,
              'C': 12,
              'D': 12,
              'E': 14,
              'F': 15,
              'G': 16,
              'H': 16,
            }),
            // 定义特殊座位（例如轮椅座位）
            specialSeats: Map.from({
              'A': [3, 1],
              'B': [1, 2, 5],
            }),
            // 定义阻塞座位（不可用）
            blockSeats: Map.from({
              'A': [4],
              'B': [3, 4],
            }),
            // 设置布局宽度
            width: MediaQuery.of(context).size.width,
            // 点击事件处理函数
            onTap: (row, seat) {
              print('点击了行 $row 座位 $seat');
            },
            // 最大缩放级别
            maxZoom: 3,
            // 按钮颜色
            color: Colors.blue,
            // 图标颜色
            iconColor: Colors.grey,
            // 阻塞图标
            toggleIcon: Icons.lock,
            // 阻塞图标颜色
            toggleColor: Colors.red,
          ),
        ),
      ),
    );
  }
}

更多关于Flutter影院布局插件g_cinema_layout的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter影院布局插件g_cinema_layout的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


g_cinema_layout 是一个用于 Flutter 的影院布局插件，它可以帮助开发者快速创建影院座位布局的 UI。这个插件通常用于票务、预订系统等需要展示座位布局的应用场景。

安装

首先，你需要在 pubspec.yaml 文件中添加 g_cinema_layout 插件的依赖：

dependencies:
  flutter:
    sdk: flutter
  g_cinema_layout: ^latest_version

然后运行 flutter pub get 来安装依赖。

基本用法

g_cinema_layout 提供了一个 CinemaLayout 小部件，你可以使用它来创建一个影院座位布局。以下是一个简单的示例：

import 'package:flutter/material.dart';
import 'package:g_cinema_layout/g_cinema_layout.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Cinema Layout Example'),
        ),
        body: Center(
          child: CinemaLayout(
            rows: 10,
            columns: 15,
            seatBuilder: (context, row, column) {
              return Seat(
                row: row,
                column: column,
                isSelected: false,
                onTap: () {
                  print('Seat $row-$column tapped');
                },
              );
            },
          ),
        ),
      ),
    );
  }
}

参数说明

  • rows: 影院座位布局的行数。
  • columns: 影院座位布局的列数。
  • seatBuilder: 一个回调函数，用于构建每个座位。它接收三个参数：BuildContext、row、column，并返回一个 Seat 小部件。

Seat 小部件

Seat 小部件用于表示单个座位，它有以下属性：

  • row: 座位的行号。
  • column: 座位的列号。
  • isSelected: 座位是否被选中。
  • onTap: 当座位被点击时触发的回调函数。

自定义样式

你可以通过自定义 Seat 小部件的样式来适应你的应用设计。例如，你可以更改座位的颜色、大小等。

Seat(
  row: row,
  column: column,
  isSelected: false,
  onTap: () {
    print('Seat $row-$column tapped');
  },
  selectedColor: Colors.blue,
  unselectedColor: Colors.grey,
  size: 30.0,
)

处理座位选择

你可以通过 isSelected 属性来管理座位的选择状态，并在 onTap 回调中更新状态。

class _MyHomePageState extends State<MyHomePage> {
  List<List<bool>> seatStatus = List.generate(10, (i) => List.filled(15, false));

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Cinema Layout Example'),
      ),
      body: Center(
        child: CinemaLayout(
          rows: 10,
          columns: 15,
          seatBuilder: (context, row, column) {
            return Seat(
              row: row,
              column: column,
              isSelected: seatStatus[row][column],
              onTap: () {
                setState(() {
                  seatStatus[row][column] = !seatStatus[row][column];
                });
              },
            );
          },
        ),
      ),
    );
  }
}
回到顶部