代码拉取完成，页面将自动刷新
有时我们把多张小图片打包成一张大图片，这种做法在游戏行业和串口屏经常使用。这样做有以下几个原因：
最新的 AWTK 对 packed 图片提供了支持。本文介绍一下如何使用 packed 的图片。
在 style 中指定图片名称时，用#分隔图片名称和子图区域，符号"#"之前是大图片的名称，符号"#"之后是设置子图区域的字符串。指定子图区域的方式有以下几种：
<pressed bg_image="image_packed_fg#"/>
注：如果当前控件的区域是 (10, 20, 30, 40)，那么子图的区域也是 (10, 20, 30, 40)。
<pressed bg_image="image_packed_fg#g"/>
注：如果当前控件的区域是 (10, 20, 30, 40)，相对于窗口的坐标是 50, 60，那么子图的区域就是 (50, 60, 30, 40)。
<pressed bg_image="image_packed_fg#xywh(106,0,106,54)"/>
注：那么子图的区域就是 (106,0,106,54)
<pressed bg_image="image_packed_fg#grid(4,3,0,2)"/
注：如果图片大小是 80x60，那么子图的区域就是 (40,0,20,20)
此处准备两张packed图片，正常时的效果图片名称为image_packed_bg，颜色浅一点；按下时的效果图片名称为image_packed_fg，颜色深一点。
注：两张图看起来有些相近，第二张是把第一张调暗后得到的，不过运行起来后按下效果很明显的。
<window>
<view style="image_packed" x="c" y="m" w="320" h="216" children_layout="default(r=4,c=3)">
<button style="num_1"/>
<button style="num_2"/>
<button style="num_3"/>
<button style="num_4"/>
<button style="num_5"/>
<button style="num_6"/>
<button style="num_7"/>
<button style="num_8"/>
<button style="num_9"/>
<button style="dot"/>
<button style="num_0"/>
<button style="backspace"/>
</view>
</window>
<pressed bg_image="image_packed_fg#" />
<button>
<style name="num_1">
<normal />
<pressed bg_image="image_packed_fg#xywh(0,0,106,54)" />
</style>
<style name="num_2">
<normal />
<pressed bg_image="image_packed_fg#xywh(106,0,106,54)" />
</style>
<style name="num_3">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,0,2)" />
</style>
<style name="num_4">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,1,0)" />
</style>
<style name="num_5">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,1,1)" />
</style>
<style name="num_6">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,1,2)" />
</style>
<style name="num_7">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,2,0)" />
</style>
<style name="num_8">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,2,1)" />
</style>
<style name="num_9">
<normal />
<pressed bg_image="image_packed_fg#grid(4,3,2,2)" />
</style>
<style name="dot">
<normal />
<pressed bg_image="image_packed_fg#" />
</style>
<style name="num_0">
<normal />
<pressed bg_image="image_packed_fg#" />
</style>
<style name="backspace">
<normal />
<pressed bg_image="image_packed_fg#" />
</style>
</button>
<view>
<style name="image_packed">
<normal bg_image="image_packed_bg" />
</style>
</view>
./bin/preview_ui ui=design/default/ui/image_packed.xml
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。