[英]Flutter display package:image/image.dart:Image in UI Widget
[英]Is there a way in Flutter/Dart to display part of an image
在 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(
您可以在下面复制粘贴运行完整代码
您可以使用 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),
),
);
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.