Flutter/Dart 中有没有办法显示图像的一部分

Question

在 Flutter 中开发纸牌游戏。在 5 x 12 网格中拥有一张带有完整卡片组的大型图形。第五排是百搭牌和卡片背面。与 60 个单独的文件相比，它在资源上的效率更高。

我想一次只显示一张卡片。我想指定 x y 作为图像上的开始位置，然后指定高度/宽度来显示多少。

尝试过这个想法，铭文会根据大小和矩形从 .topLeft 移动对齐方式。

https://api.flutter.dev/flutter/painting/Alignment/inscribe.html

  body: Center(
          child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.stretch,
              children: <Widget>[
                ClipRect(
                  child: Align(
                    alignment: Alignment.topLeft.inscribe(
                        Size(100, 100), Rect.fromLTWH(0, 0, 100, 100)),
                    heightFactor: 0.5,
                    child: Image.asset(
                      'images/Deck1.png',
                    ),
                  ),
                ),
                RaisedButton(

但是在这一行出现编译错误

Compiler message:
lib/screens/home/home.dart:34:50: Error: The argument type 'Rect' can't be assigned to the parameter type 'AlignmentGeometry'.
 - 'Rect' is from 'dart:ui'.
 - 'AlignmentGeometry' is from 'package:flutter/src/painting/alignment.dart' ('../../Developer/flutter/packages/flutter/lib/src/painting/alignment.dart').
                    alignment: Alignment.topLeft.inscribe(

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用包 https://pub.dev/packages/flame 来使用 Sprite
为了让这个例子正常工作，您需要将 png https://raw.githubusercontent.com/flame-engine/flame/master/doc/examples/animation_widget/assets/images/minotaur.png 放入 assets/images 文件夹

这个png 有1 个row 和19 列
加载SpriteSheet后，可以用SpriteWidget显示并定义你要显示的图片position

SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5))

代码sn-p

 final _animationSpriteSheet = SpriteSheet(
      imageName: 'minotaur.png',
      columns: 19,
      rows: 1,
      textureWidth: 96,
      textureHeight: 96,
    );
  ...
  Container(
    width: 200,
    height: 200,
    child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 0)),
  ),
  Container(
    width: 200,
    height: 200,
    child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5)),
  ),

您可以参考文档来源https://medium.com/flutter-community/sprite-sheet-animations-in-flutter-1b693630bfb3中的详细信息
工作演示

完整代码

import 'dart:async';

import 'package:flame/anchor.dart';
import 'package:flame/flame.dart';
import 'package:flame/animation.dart' as animation;
import 'package:flame/sprite.dart';
import 'package:flame/spritesheet.dart';
import 'package:flame/position.dart';
import 'package:flame/widgets/animation_widget.dart';
import 'package:flame/widgets/sprite_widget.dart';
import 'package:flutter/material.dart';

Sprite _sprite;
Sprite _sprite1;
animation.Animation _animation;
final _animationSpriteSheet = SpriteSheet(
  imageName: 'minotaur.png',
  columns: 19,
  rows: 1,
  textureWidth: 96,
  textureHeight: 96,
);

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  _sprite = await Sprite.loadSprite('minotaur.png', width: 96, height: 96);


  await Flame.images.load('minotaur.png');

  _animation = _animationSpriteSheet.createAnimation(
    0,
    stepTime: 0.2,
    to: 19,
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animation as a Widget Demo',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: MyHomePage(),
    );
  }
}

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

class _MyHomePageState extends State<MyHomePage> {
  Position _position = Position(256.0, 256.0);

  @override
  void initState() {
    super.initState();
    changePosition();
  }

  void changePosition() async {
    await Future.delayed(const Duration(seconds: 1));
    setState(() {
      _position = Position(10 + _position.x, 10 + _position.y);
      print(_position.toString());
    });
  }

  void _clickFab(GlobalKey<ScaffoldState> key) {
    key.currentState.showSnackBar(
      const SnackBar(
        content: const Text('You clicked the FAB!'),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    final key = GlobalKey<ScaffoldState>();
    return Scaffold(
      key: key,
      appBar: AppBar(
        title: const Text('Animation as a Widget Demo'),
      ),
      body: Center(
        child: SingleChildScrollView(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text('Hi there! This is a regular Flutter app,'),
              const Text('with a complex widget tree and also'),
              const Text('some pretty sprite sheet animations :)'),
              Container(
                width: 200,
                height: 200,
                child: AnimationWidget(animation: _animation),
              ),
              const Text('Neat, hum?'),
              const Text(
                  'By the way, you can also use static sprites as widgets:'),
              Container(
                width: 200,
                height: 200,
                child: SpriteWidget(sprite: _sprite),
              ),
              Container(
                width: 200,
                height: 200,
                child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 0)),
              ),
              Container(
                width: 200,
                height: 200,
                child: SpriteWidget(sprite: _animationSpriteSheet.getSprite(0, 5)),
              ),
              const Text('Sprites from Elthen\'s amazing work on itch.io:'),
              const Text('https://elthen.itch.io/2d-pixel-art-minotaur-sprites'),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => _clickFab(key),
        child: const Icon(Icons.add),
      ),
    );
  }
}