Flutter/Dart 中有沒有辦法顯示圖像的一部分

Question

在 Flutter 中開發紙牌游戲。 在 5 x 12 網格中擁有一張帶有完整卡片組的大型圖形。 第五排是百搭牌和卡片背面。 與擁有 60 個單獨的文件相比，它在資源上的效率更高。

我想一次只顯示一張卡片。 我想指定 xy 作為圖像的開始位置，然后指定高度/寬度來顯示多少。

試過這個想法，銘文會根據大小和矩形將 alignment 從.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

您可以在下面復制粘貼運行完整代碼
您可以使用 package 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))

代碼片段

 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),
      ),
    );
  }
}