Flutter扑克牌操作插件playing_cards的使用

Flutter扑克牌操作插件playing_cards的使用

playing_cards 插件为 Flutter 提供了轻松渲染标准52张牌的能力。默认情况下提供了良好的配置选项，但也可以通过提供样式对象进行完全自定义。

开始使用

下图展示了一些默认的纸牌：

如果你不喜欢阅读，这里有一个视频概述：点击观看

要导入此包，请在你的 Dart 文件中添加以下代码：

import 'package:playing_cards/playing_cards.dart';

这是一个简单的例子，用于渲染一张梅花9：

PlayingCardView(card: PlayingCard(Suit.clubs, CardValue.nine))

这里是一个完全自定义样式的纸牌示例：

// 这个样式对象覆盖了梅花的样式。
PlayingCardViewStyle myCardStyles = PlayingCardViewStyle(suitStyles: {
  Suit.spades: SuitStyle(
    builder: (context) => FittedBox(
          fit: BoxFit.fitHeight,
          child: Text(
            "💩",
            style: TextStyle(fontSize: 500),
          ),
        ),
    style: TextStyle(color: Colors.brown),
    cardContentBuilders: {
      CardValue.jack: (context) =>
          Image.asset("assets/jack_of_spades.png"),
      CardValue.queen: (context) =>
          Image.asset("assets/queen_of_spades.png"),
      CardValue.king: (context) =>
          Image.asset("assets/king_of_spades.png"),
    })
});
List<PlayingCard> deck = standardFiftyTwoCardDeck();
Container(
  height: 150,
  child: SingleChildScrollView(
    scrollDirection: Axis.horizontal,
    child: Row(
      children: deck.map((e) => PlayingCardView(card: e, style: myCardStyles)).toList(),
    ),
  ),
),

PlayingCardViewStyle 类还接受一个 suitBesideLabel: true 选项来将花色放在数字旁边而不是下方：

此外，还有一个扁平堆叠小部件用于常见的水平展开纸牌场景：

ShapeBorder shape = RoundedRectangleBorder(
  borderRadius: BorderRadius.circular(8),
  side: BorderSide(color: Colors.black, width: 1));
FlatCardFan(children: [
  PlayingCardView(
    card: PlayingCard(Suit.hearts, CardValue.ace),
    showBack: true,
    elevation: 3.0,
    shape: shape),
  PlayingCardView(
      card: PlayingCard(Suit.hearts, CardValue.ace),
      showBack: true,
      elevation: 3.0,
      shape: shape),
  PlayingCardView(
      card: PlayingCard(Suit.hearts, CardValue.ace),
      showBack: true,
      elevation: 3.0,
      shape: shape),
  PlayingCardView(
      card: PlayingCard(Suit.hearts, CardValue.ace),
      elevation: 3.0,
      shape: shape)
])

小丑牌

小丑牌被建模为单个小丑花色中的两个小丑卡值（小丑1，小丑2）。

你可以使用 deck.dart 中的 standardFiftyFourCardDeck() 函数来创建包含两张小丑牌的纸牌组。

完整示例代码

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

void main() {
  runApp(MaterialApp(
      theme: ThemeData(
          useMaterial3: true,
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.blue.shade700)),
      home: CardHomeView()));
}

class CardHomeView extends StatefulWidget {
  const CardHomeView({Key? key}) : super(key: key);

  [@override](/user/override)
  State<CardHomeView> createState() => _CardHomeViewState();
}

class _CardHomeViewState extends State<CardHomeView> {
  Suit suit = Suit.spades;
  CardValue value = CardValue.ace;

  // 这个样式对象覆盖了纸牌花色的样式，用文本替换图像实现花色符号。
  PlayingCardViewStyle myCardStyles = PlayingCardViewStyle(
    suitStyles: {
      Suit.spades: SuitStyle(
        builder: (context) => const FittedBox(
          fit: BoxFit.fitHeight,
          child: Text(
            "♠",
            style: TextStyle(fontSize: 500),
          ),
        ),
        style: TextStyle(color: Colors.grey[800]),
      ),
      Suit.hearts: SuitStyle(
        builder: (context) => const FittedBox(
          fit: BoxFit.fitHeight,
          child: Text(
            "♥",
            style: TextStyle(fontSize: 500, color: Colors.red),
          ),
        ),
        style: const TextStyle(color: Colors.red),
      ),
      Suit.diamonds: SuitStyle(
        builder: (context) => const FittedBox(
          fit: BoxFit.fitHeight,
          child: Text(
            "♦",
            style: TextStyle(fontSize: 500, color: Colors.red),
          ),
        ),
        style: const TextStyle(color: Colors.red),
      ),
      Suit.clubs: SuitStyle(
        builder: (context) => const FittedBox(
          fit: BoxFit.fitHeight,
          child: Text(
            "♣",
            style: TextStyle(fontSize: 500),
          ),
        ),
        style: TextStyle(color: Colors.grey[800]),
      ),
      Suit.joker: SuitStyle(builder: (context) => Container()),
    },
  );

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          PlayingCardView(card: PlayingCard(suit, value), style: myCardStyles),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: [
              DropdownButton<Suit>(
                value: suit,
                items: Suit.values
                    .map(
                      (s) => DropdownMenuItem(
                        value: s,
                        child: Text(s.toString()),
                      ),
                    )
                    .toList(),
                onChanged: (val) {
                  setState(() {
                    suit = val!;
                  });
                },
              ),
              DropdownButton<CardValue>(
                value: value,
                items: CardValue.values
                    .map(
                      (s) => DropdownMenuItem(
                        value: s,
                        child: Text(s.toString()),
                      ),
                    )
                    .toList(),
                onChanged: (val) {
                  setState(() {
                    value = val!;
                  });
                },
              ),
            ],
          )
        ],
      ),
    );
  }
}