在 Flutter 中選擇包含 ListTile() 的 Card()

Question

我們可以有一個可選ListTile()就像ChoiceChip()

我希望包含 ListTile 的 Card() 是可選的。
這是卡片的圖像：
這是一張卡片的代碼：

             Container(
                        width: 98.0,
                        child: Card(
                          child: ListTile(
                            title: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  'Flat No',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                            subtitle: Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: <Widget>[
                                Text(
                                  '102',
                                  style: TextStyle(
                                    color: Colors.black,
                                    fontSize: 15.0,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

Answer 1

只需將ChoiceChip與Column ChoiceChip使用。

此處演示： DartPad

嘗試這個，

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final flatRoomList = List.generate(50, (i) => i + 1);

  final selectedFlatRooms = <int>{};

  final alreadyReservedRooms = <int>{2, 4, 23, 7, 13, 39};

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
            crossAxisCount: 3,
            crossAxisSpacing: 10.0,
            mainAxisSpacing: 10.0,
          ),
          itemCount: flatRoomList.length,
          itemBuilder: (context, index) {
            final roomNo = flatRoomList[index];
            return MyChoiceChip(
              flatNo: roomNo.toString(),
              selected: selectedFlatRooms.contains(roomNo),
              onSelected: alreadyReservedRooms.contains(roomNo)
                  ? null
                  : (isSelected) {
                      setState(() {
                        if (isSelected)
                          selectedFlatRooms.add(roomNo);
                        else
                          selectedFlatRooms.remove(roomNo);
                      });
                    },
            );
          },
        ),
      ),
    );
  }
}

class MyChoiceChip extends StatelessWidget {
  final String flatNo;
  final bool selected;
  final ValueChanged<bool> onSelected;

  const MyChoiceChip({
    Key key,
    @required this.flatNo,
    @required this.selected,
    this.onSelected,
  })  : assert(flatNo != null),
        assert(selected != null),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return ChoiceChip(
      elevation: 5.0,
      backgroundColor: Colors.green[50],
      disabledColor: Colors.red[300],
      padding: const EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),
      label: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text(
              "Flat No",
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 18.0,
              ),
            ),
            Text(
              flatNo,
              style: const TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 24.0,
              ),
            ),
          ],
        ),
      ),
      selected: selected,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(5.0),
      ),
      onSelected: onSelected,
    );
  }
}

Answer 2

如果您想讓您的卡片可點擊，您只需要使用 GestureDetector、InkWell 或 ... 包裹您的卡片小部件。

child: GestureDetector(
   oneTap: (){...}
   child: Card(..),
);