Question

在Flutter中玩纸牌游戏。在5 x 12的网格中有一张带有完整卡座的大图形。第五排是小丑和背牌。与60个单独的文件相比，它在资源上将更为有效。

我想一次只显示一张卡。我想指定x y作为图像的起始位置，然后指定要显示的高度/宽度。

尝试过这种想法，题词者将根据尺寸和矩形将.topLeft的对齐方式移出。

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

import React from 'react';
import {View, Text, StyleSheet} from 'react-native';
import Svg, {Line} from 'react-native-svg';

export default ({x, y}) => {
  // console.log(vertical);
  return (
    <Svg>
      <Line
        x1={'0'}
        x2={x}
        y1={'0'}
        y2={y}
        stroke={'black'}
        strokeWidth={'2'}
        strokeDasharray="6 6"
      />
    </Svg>
  );
};

但是在此行出现编译错误

  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(

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中是否可以显示图像的一部分

1 个答案: