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

Question

正在用 Flutter 开发纸牌游戏。在 5 x 12 网格中放置一张带有完整卡片组的大图形。第 5 行是小丑和卡片背面。与 60 个单独的文件相比，它在资源上的效率更高。

我想一次只显示一张卡片。我想指定 x y 作为图像的开始位置，然后 height/width 指定要显示的数量。

尝试过这种想法，认为题词会根据大小和矩形从 .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))

代码片段

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

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

Is there a way in Flutter/Dart to display part of an image

image

alignment

dart

flutter