Question

我的座位页面有问题，任何人都可以帮助我。如您所见，我已经使用gridview显示了座位，但我无法选择它。我希望用户能够选择1个或多个座位或取消选择它，然后显示他们选择的座位

这是我想要实现的 seat_selected

谢谢

我的座位代码

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

class Seats extends StatefulWidget {


  @override
  _SeatsState createState() => new _SeatsState();
}

class _SeatsState extends State<Seats> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color(0xff828EFB),
      appBar: AppBar(
        toolbarHeight: 100,
        elevation: 0,
        backgroundColor: Colors.transparent,
        title: Text("Seats" , style: GoogleFonts.poppins(
    fontSize: 28,
    fontWeight: FontWeight.bold,
    color: Colors.white
  ),),
        titleSpacing: 6,
        centerTitle: true,
      ),
      body:
          Container(
                height: 420,
                width: 350,
                transform: Matrix4.translationValues(25, 65, 1),
                decoration: BoxDecoration(
                  boxShadow: [
          BoxShadow(
            color: Colors.pink,
            spreadRadius: 1,
            blurRadius: 0,
            offset: Offset(-7, 8), // changes position of shadow
          ),
    ],
                  color: Colors.white,
                  borderRadius: BorderRadius.circular(45)
                  ),
                  
        child: Column(
          children: [
            Container(
               transform: Matrix4.translationValues(0, 40, 1),
              child: Text("Screen")
            ),
            Container(
              width: 250,
              transform: Matrix4.translationValues(0, 50, 1),
              child: Divider(
                height: 10,
                color: Colors.pink,
                thickness: 3,

              ),
            ),
            Container(
                    transform: Matrix4.translationValues(0, 100, 1),

              child: Padding(
                padding: const EdgeInsets.only(left: 20, right:20),
                child: GridView.count(
                    crossAxisSpacing: 20,
                    shrinkWrap: true,
                    crossAxisCount: 6,
                    mainAxisSpacing: 10,
                    childAspectRatio: 1,
                    children: List.generate(seats.length, (index) {
                      return Center(
                        child: RaisedButton(
                          onPressed: (){
                          },
                          color: Color(0xff828EFB),
                          child: Text(
                            seats[index] , style: TextStyle(fontSize: 12),
                          ),
                        ),
                      );
                    }),
                  
    ),
              ),
            ),
            Container(
              transform: Matrix4.translationValues(0, 160, 1),
              child: Text("your selected seats are: ")
            )
          ],
        ),
        
      ),

    );
  }
}
List<String> seats = [
  'A1',
  'A2',
  'A3',
  'A4',
  'A5',
  'B1',
  'B2',
  'B3',
  'B4',
  'B5',
  'C1',
  'C2',
  'C3',
  'C4',
  'D1',
  'D2',
  'D3',
  'D4',
  'D5',
  'E1',
  'E2',
  'E3',
  'E4',
  'E5',
];

Answer 1

创建座位列表索引：

List<int> _selectedItems = List();

并将这些代码添加到RaisedButton‍ -> onPressed()并相应地更改项目的颜色：

RaisedButton(
  onPressed: () {
    setState(() {
      _selectedItems.contains(index) ? _selectedItems.remove(index) : _selectedItems.add(index);
    });
  },
  color: _selectedItems.contains(index) ? Colors.lightGreen : Color(0xff828EFB),
  child: Text(
    seats[index], style: TextStyle(fontSize: 12),
  ),
),

现在您想在任何地方都可以使用此选定列表。

更新

为向用户显示所选座位，请创建String字段，例如：

String _selectedSeatsText = "Nothing";

并将其设置为您的文本：

Container(
  transform: Matrix4.translationValues(0, 160, 1),
  child: Text("your selected seats are: $_selectedSeatsText "),
)

最后使用此方法更改文本：

void getSelectedSeats() {
  _selectedSeatsText = "";
  _selectedItems.forEach((element) {
    if (_selectedSeatsText != "") _selectedSeatsText += " , ";
    _selectedSeatsText += (seats[element]);
  });
}

我希望它对您有用。

在gridview颤振中选择多个项目

1 个答案: