在Flutter中选择包含ListTile（）的Card（）

Himanshu Sharma

我们可以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,
                                  ),
                                ),
                              ],
                            ),
                          ),
                        ),
                      ),

疯狂的懒猫

只需ChoiceChip与一起使用Column。

此处演示：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,
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。