如何在Flutter中实现赛事门票预订页面的体育场座位布局

Hey there! Creating a stadium seat layout for your ticket booking app is a key feature that can make or break the user experience—let me share some practical, battle-tested approaches to pull this off smoothly.

1. Basic HTML/CSS/JS Approach (For Simple Grid Layouts) #

If your stadium has mostly rectangular, grid-based seat blocks, this is the quickest way to get started. Use div elements for seats, CSS Grid/Flexbox to arrange them, and JavaScript to handle seat selection and state management.

Example Code: #

HTML

<div class="stadium-seat-map">
  <div class="section">
    <h3>VIP Section</h3>
    <div class="seat-row">
      <div class="seat available" data-seat-id="vip-1-1"></div>
      <div class="seat available" data-seat-id="vip-1-2"></div>
      <div class="seat sold" data-seat-id="vip-1-3"></div>
      <!-- Add more seats here -->
    </div>
  </div>
  <div class="section">
    <h3>General Admission</h3>
    <!-- Repeat seat row structure for this section -->
  </div>
</div>

CSS

.stadium-seat-map {
  display: flex;
  gap: 2rem;
  padding: 2rem;
  flex-wrap: wrap;
}

.section {
  background: #f0f0f0;
  padding: 1rem;
  border-radius: 8px;
}

.seat-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.seat {
  width: 2rem;
  height: 2rem;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.2s;
}

.seat.available {
  background: #4CAF50;
}

.seat.sold {
  background: #f44336;
  cursor: not-allowed;
}

.seat.selected {
  background: #2196F3;
}

JavaScript

document.querySelectorAll('.seat.available').forEach(seat => {
  seat.addEventListener('click', () => {
    seat.classList.toggle('selected');
    // Sync with your booking logic here
    const seatId = seat.dataset.seatId;
    console.log(`Seat ${seatId} ${seat.classList.contains('selected') ? 'selected' : 'deselected'}`);
  });
});

2. SVG Approach (For Complex, Irregular Layouts) #

If your stadium has curved sections, odd-shaped blocks, or you need pixel-perfect scaling across devices, SVG is your best bet. It lets you draw custom seat shapes and arrange them freely, and it scales seamlessly without losing quality.

Example SVG Snippet: #

<svg viewBox="0 0 800 600" class="stadium-svg">
  <!-- Curved VIP Section -->
  <g class="section" id="vip-section">
    <text x="350" y="100" font-size="16">VIP Section</text>
    <rect x="300" y="120" width="20" height="20" class="seat available" data-seat-id="vip-curve-1" />
    <rect x="325" y="115" width="20" height="20" class="seat available" data-seat-id="vip-curve-2" />
    <!-- Adjust x/y positions for more curved seats -->
  </g>
  
  <!-- Grid-based General Admission -->
  <g class="section" id="ga-section">
    <text x="100" y="300" font-size="16">General Admission</text>
    <rect x="100" y="320" width="20" height="20" class="seat sold" data-seat-id="ga-1-1" />
    <rect x="125" y="320" width="20" height="20" class="seat available" data-seat-id="ga-1-2" />
  </g>
</svg>

You can reuse the same CSS classes and JavaScript logic from the basic approach here—SVG elements work with event listeners just like HTML elements!

3. Key Production Considerations #

• State Management: Keep track of selected seats globally (e.g., using React Context, Vuex, or a simple JS object) to sync with your booking cart.
• Performance: For thousands of seats, avoid rendering all at once. Use virtual scrolling or lazy load sections as the user scrolls/zooms.
• Accessibility: Add aria-label attributes to seats (e.g., aria-label="VIP Section, Row 1, Seat 1") and ensure keyboard navigation works (tab to select seats with Enter).
• Responsiveness: On mobile, allow pinch-to-zoom or simplify the layout to show only relevant sections. Use media queries to adjust seat sizes and spacing.
• Real-Time Updates: Fetch seat availability from your API on load, and update states in real-time if another user books a seat while someone is viewing the map.

Pro tip: For framework-based projects, use specialized libraries (like react-seat-picker for React or vue-seat-selector for Vue) to speed up development—just ensure they support custom layout customization!

内容的提问来源于stack exchange，提问作者Mohamed Reda