Question

我需要为单选按钮组中的每个单选按钮显示一个图像。

我已经看到了一些自定义单选按钮和单选按钮组的示例，但它们都没有工作。

有人可以指出我正确的方向吗？

Answer 1

“正确的方向”是首先了解哪些替代品可以帮助用户实现他们的目标（而不是创建自定义控件并维护它）。 例如：我们可以轻松模仿可以使用以下组合显示图像的单选按钮的行为：

sap.m.List具有以下属性：

mode="SingleSelectLeft"
includeItemInSelection="true"
backgroundDesign="Transparent"
showSeparators="None"
width="auto"

支持显示图像的ListItemBase子类（例如sap.m.StandardListItem ^[1]或.CustomListItem）。

运行示例以查看其实际操作：

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/mvc/XMLView",
  "sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => XMLView.create({
  definition: `<mvc:View
    xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m"
    height="100%"
    displayBlock="true"
  >
    <App>
      <List
        mode="SingleSelectLeft"
        backgroundDesign="Transparent"
        showSeparators="None"
        width="auto"
        includeItemInSelection="true"
        items="{options>/}"
      >
        <StandardListItem
          icon="{options>img}"
          title="{options>text}"
        />
      </List>
    </App>
  </mvc:View>`,
  models: {
    "options": new JSONModel([
      {
        text: "Option 1",
        img: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LDBzLS4wNTIxNiwyMC44MDk3LDU0LjM0NTYyLDUzLjg1ODgyQzQwNC40MDkyNywxMTguMDI2MDcsNDA0LjA1MzI5LDE3Ni44NTI4OSw0MDQuMDUzMjksMTg5LjE5OGMwLDUyLjQ0MDc2LTU0LjU4LDg2LjM0MDU5LTc5LjkwNDY4LDU4LjkwMzU4LDAsMCwyNC44NDkwNS0xOC40NDE4NCwyNC44NDkwNS00Ni43OTkyNywwLDAtMTguMjIyNjUsMTIuMDEwNS0yNy43NDgxMiwxNC4wODEyOSwwLDAsMTIuNDI0NTMtMjEuOTUwMjEsNi42MjY0LTYwLjQ2NjMxLDAsMC05LjkzOTQ5LDE5LjQ2NTE3LTQxLjgyOTE5LDM1LjIwMywwLDAsMTIuNDI0NTMtMjcuNzQ4MTIuODI4MjctNTQuMjUzOTQsMCwwLDIuNDg0ODIsMzMuMTMyMjItNzIuODkwODMsNjguMzM1LTc1LjM3NTY1LDM1LjIwMy01Mi4xODMxNCw3MC40MDU4MS01Mi4xODMxNCw3MC40MDU4MXMxNS4wMjU2MS0xNS45NTU5NCw0MC41MzUyMi00Ljc0OTgxYzM0LjUxMTI0LDE1LjE2MDM5LDIwLjU2NDU1LDc1Ljk5ODM5LTM0LjkzMTksNzUuOTk4MzktNTQuMDMwODgsMC04OS40OTUzMy01OC43NTktODkuNDk1MzMtMTA0LjY0MTg3LDAtMTguOTcxLDIuMDU2NS01My44NzMzNSwzNi4zMzE1MS05Mi4yNjEzNiwyNy4yNjE2Mi0zMC41MzMsNjAuODc3OC00Ni42NDIzOSw2OC4wOTMtODAuNDA1NjhDMTQ0Ljk3MzgxLDEwMy4xNjQ2Myw3Ny42MTQyMiwxMjUuNzU2MywzNy41NTYyMiwxODQuOTk4NzNjLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDhDNDkuMTA5NDEsNDI4LjQzNTQsMTQwLjEzOTY0LDUwMCwyNDcuODg0NTMsNTAwYzEzMS41MDI5MywwLDIzOS40Nzc4OS0xMDUuMjMzMTksMjM5LjQ3Nzg5LTIzNi43MzU4OUM0ODcuMzYyNDMsNjQuMTgyMTQsMjk4LjA5ODIsNDMuMDU3NTQsMjQ0LjQ0NjQ1LDBaTTIxMi41ODYsMjQzLjcwODc3Yy00LjAwNzQ1LjkzMjQ4LTcuODQ0MjMtLjc0NDMxLTE0LjI0NzYzLTIuNjkxNzMtNS45ODcxLTEuODIwODEtOC4xMDY3Mi0xLjQ3MjIyLTguMTA2NzItMS40NzIyMmExMDEuNDUzMDksMTAxLjQ1MzA5LDAsMCwxLDEyLjY3MDQzLTcuMjY3MDljNi4zNjA2Mi0yLjkyODY5LDExLjc5MzgtMy4wODEyMiwxNC4zMjEsMi43NDZDMjE4Ljg4NDM4LDIzOC44NTQzOSwyMTUuODcxMDksMjQyLjk0NDIyLDIxMi41ODYsMjQzLjcwODc3WiIgZmlsbD0ibm9uZSIvPjwvY2xpcFBhdGg+PGxpbmVhckdyYWRpZW50IGlkPSJiIiB4MT0iMzY3Ljk3OTMxIiB5MT0iNDY4LjA5OTY3IiB4Mj0iMTM0LjQwMjk5IiB5Mj0iNjMuNTMzNjIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj48c3RvcCBvZmZzZXQ9IjAiIHN0b3AtY29sb3I9IiMxOTczYjQiLz48c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiM1NGI5ZGUiLz48L2xpbmVhckdyYWRpZW50PjwvZGVmcz48dGl0bGU+LTwvdGl0bGU+PGcgc3R5bGU9Imlzb2xhdGlvbjppc29sYXRlIj48ZyBjbGlwLXBhdGg9InVybCgjYSkiPjxwYXRoIGQ9Ik0yNDQuNDQ2NDUsMHMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJDNDA0LjQwOTI3LDExOC4wMjYwNyw0MDQuMDUzMjksMTc2Ljg1Mjg5LDQwNC4wNTMyOSwxODkuMTk4YzAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAzLjE2NDYzLDc3LjYxNDIyLDEyNS43NTYzLDM3LjU1NjIyLDE4NC45OTg3M2MtMzUuOTgwOSw1My4yMTI3NC0yNC4yOTkwOCwxMjMuNTk3MzMtMTcuODIxODYsMTQ1LjI0OEM0OS4xMDk0MSw0MjguNDM1NCwxNDAuMTM5NjQsNTAwLDI0Ny44ODQ1Myw1MDBjMTMxLjUwMjkzLDAsMjM5LjQ3Nzg5LTEwNS4yMzMxOSwyMzkuNDc3ODktMjM2LjczNTg5QzQ4Ny4zNjI0Myw2NC4xODIxNCwyOTguMDk4Miw0My4wNTc1NCwyNDQuNDQ2NDUsMFoiIGZpbGw9IiMxOTczYjQiLz48cGF0aCBkPSJNMjkyLjA0NSwzMTEuODUyNThzNS45NzQzMyw5NC41ODIwNy0xMDYuMDU5NywxMDguNTI5OTFDMTEyLjgyMzcxLDQyOS40OTA4NSw1NS4yNDE0OSwzODIuODY5NjEsMzAuMjU4NzMsMzIzLjQ4N2MtMTcuMzkyMTMtNDEuMzQwMDctMTguOTg1MDctODguODY0ODcuOTYzNjMtMTI4LjA3NzE4LDAsMC03Mi42NTUxNiw2OS4yNDk5Mi02OS4zMTQ0NCwxNzIuODkxNjRDLTM0LjYyMzE1LDQ3NS45MjExMSw1MC41MzI0Nyw2MTcuMzUzODcsMzcwLjAwMDQ2LDU3Ni40MjIsNDc2LjIxMTM3LDU2Mi44MTM3Niw1MTUuMTY3LDQxMy45ODgxMSw1MTYuNzQxNjIsMzI1LjYyMmMxLjk1Nzg3LTEwOS44NzQ4Mi00OS40NTM0OC0xNjEuOTUzNzYtNDkuNDUzNDgtMTYxLjk1Mzc2czI2LjgzMTMyLDc3LjYzMjUyLTM1LjAxMDQzLDEzOS40NzQyN0MzOTcuODE4NywzMzcuNjAxNDksMzM5LjE4NTQ5LDM0OS41MjU2OSwyOTIuMDQ1LDMxMS44NTI1OFoiIGZpbGw9IiM1NGI5ZGUiIG9wYWNpdHk9IjAuNCIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOmxpZ2h0ZW4iLz48cGF0aCBkPSJNNDY0LjUwNTExLDM2Ni43MjYyNFMzNTcuNjkyLDM5OS4zMTgzLDI5Mi4wNDUsMzExLjg1MjU4YzAsMCwyOC43MTkyMywxMTEuMzIyNTYtOTMuNjU3NzUsMTgzLjYxNjQ0LDAsMCw0Mi40MDA3OSwxMjUuNzEwNjUsMTgyLjQ1NzMxLDYzLjMwMjY2QzQyNS43ODQxNyw1MzguNzQ3LDQ1OS42MzkyOCw0NDEuOTc0Niw0NjQuNTA1MTEsMzY2LjcyNjI0WiIgZmlsbD0iIzU0YjlkZSIgb3BhY2l0eT0iMC42IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bGlnaHRlbiIvPjxwYXRoIGQ9Ik0yNzguNTQ0MzYsNTI3LjEwMTA2UzM0NS4zNzAzLDQ0MS45MDE4NywyOTIuMDQ1LDMxMS44NTI1OGMwLDAsNDcuODgxNDYsOTcuODIxOSwxMzMuNzAwMTIsMTMyLjM5MzZDNDI1Ljc0NTE0LDQ0NC4yNDYxOCwzNzQuNDI2MzYsNTMwLjE1ODA2LDI3OC41NDQzNiw1MjcuMTAxMDZaIiBmaWxsPSIjNTRiOWRlIiBvcGFjaXR5PSIwLjgiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpsaWdodGVuIi8+PHBhdGggZD0iTTIzMC43NzY5NSwyNDguNjk0ODdjNDEuOTI5NDUtMjEuNjEzMTIsNTUuMzcwMTEtNTguNjQyMzEsNTUuMzcwMTEtNTguNjQyMzFzMTIuNDI1MzYtMjcuNzYzMzguODIwNTItNTQuMjg4ODFjMCwwLDIuNDg2NjYsMzMuMTU2NzMtNzIuOTQ0NzYsNjguMzg1NTctNzUuNDMxNDIsMzUuMjI5MDUtNTIuMjIxNzUsNzAuNDU3ODktNTIuMjIxNzUsNzAuNDU3ODksMy45NDk4LTMuNTIxNDMsNy43MDc2Ny01Ljg5NDYxLDE1LjE1NDg1LTcuODk4MDhDMTg5LjM2Nzg3LDI2My4zNywyMDguOTA0MjQsMjU5Ljk2OTQ2LDIzMC43NzY5NSwyNDguNjk0ODdaIiBmaWxsPSIjNTRiOWRlIiBvcGFjaXR5PSIwLjYiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpvdmVybGF5Ii8+PHBhdGggZD0iTTIzMi45MzgyNiwyNjQuMDQwMTljMzIuNDA1NiwwLDY5Ljg5My0xNS4wNjI1NCw4OC40NDMyNi00OC42OTUxOSwyLjg5ODctNS4yNTU1LDUuNDgxMDctMTMuNzg4MzEsNi43NjQ5MS0yMS44MTY1NCwyLjA0NjI5LTEyLjc5NjEyLDIuMjU3NzktMjIuMzE2NzUtLjEwODA3LTM5LjYwNiwwLDAtNi4xNDI2MSwxNy4yMDQ1My00MS44OTEzMSwzNi4xMzAxNC0xMi45NzU5NCw2Ljg2OTU1LTI5LjYxMTcyLDEzLjczOTMtNTEuNjEwNjgsMjAuNDE1NjItODUuMjM4NSwyNS44Njg0OS03Mi43MzUzMSw2NC4xMzktNzIuNzM1MzEsNjQuMTM5QzE3NS4yMzM2MSwyNjUuNzE2MjgsMTc1LjMxNDY2LDI2NC4wNDAxOSwyMzIuOTM4MjYsMjY0LjA0MDE5WiIgZmlsbD0iIzU0YjlkZSIgb3BhY2l0eT0iMC40IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjxwYXRoIGQ9Ik0yMzIuOTM4MjYsMjY0LjA0MDE5YzI5Ljc5MTI2LDAsNzAuMjkzNjUsMS42NzUyNiw5MS4zMzA0OC0xNS45NTgxOSwxMi45MDExNy0xMC44MTQsMjQuNjgwMzItMjUuMTA1NjcsMjQuOTAyMTctNDYuODg0NywwLDAtMTcuNjQ3NDMsMTEuNjQ3ODgtMjcuNzkzLDE0LjE1MjMzLTE0LjAzNDIyLDMuNDY0MzYtMzkuMjg3LDguNzc3NTYtNjIuMzkxLDcuNDY2MS03OC40MDU0MS00LjQ1MDU1LTk3LjE4NTgsNTEuNzkxNDgtOTcuMTg1OCw1MS43OTE0OEMxNzIuNjEzLDI2NC42MDg2LDE4NS43NywyNjQuMDQwMTksMjMyLjkzODI2LDI2NC4wNDAxOVoiIGZpbGw9IiM1NGI5ZGUiIG9wYWNpdHk9IjAuMiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOm92ZXJsYXkiLz48cGF0aCBkPSJNMjQ0LjQ0NjQ1LDBzLS4wNTIxNiwyMC44MDk3LDU0LjM0NTYyLDUzLjg1ODgyQzQwNC40MDkyNywxMTguMDI2MDcsNDA0LjA1MzI5LDE3Ni44NTI4OSw0MDQuMDUzMjksMTg5LjE5OGMwLDUyLjQ0MDc2LTU0LjU4LDg2LjM0MDU5LTc5LjkwNDY4LDU4LjkwMzU4LDAsMCwyNC44NDkwNS0xOC40NDE4NCwyNC44NDkwNS00Ni43OTkyNywwLDAtMTguMjIyNjUsMTIuMDEwNS0yNy43NDgxMiwxNC4wODEyOSwwLDAsMTIuNDI0NTMtMjEuOTUwMjEsNi42MjY0LTYwLjQ2NjMxLDAsMC05LjkzOTQ5LDE5LjQ2NTE3LTQxLjgyOTE5LDM1LjIwMywwLDAsMTIuNDI0NTMtMjcuNzQ4MTIuODI4MjctNTQuMjUzOTQsMCwwLDIuNDg0ODIsMzMuMTMyMjItNzIuODkwODMsNjguMzM1LTc1LjM3NTY1LDM1LjIwMy01Mi4xODMxNCw3MC40MDU4MS01Mi4xODMxNCw3MC40MDU4MXMxNS4wMjU2MS0xNS45NTU5NCw0MC41MzUyMi00Ljc0OTgxYzM0LjUxMTI0LDE1LjE2MDM5LDIwLjU2NDU1LDc1Ljk5ODM5LTM0LjkzMTksNzUuOTk4MzktNTQuMDMwODgsMC04OS40OTUzMy01OC43NTktODkuNDk1MzMtMTA0LjY0MTg3LDAtMTguOTcxLDIuMDU2NS01My44NzMzNSwzNi4zMzE1MS05Mi4yNjEzNiwyNy4yNjE2Mi0zMC41MzMsNjAuODc3OC00Ni42NDIzOSw2OC4wOTMtODAuNDA1NjhDMTQ0Ljk3MzgxLDEwMy4xNjQ2Myw3Ny42MTQyMiwxMjUuNzU2MywzNy41NTYyMiwxODQuOTk4NzNjLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDhDNDkuMTA5NDEsNDI4LjQzNTQsMTQwLjEzOTY0LDUwMCwyNDcuODg0NTMsNTAwYzEzMS41MDI5MywwLDIzOS40Nzc4OS0xMDUuMjMzMTksMjM5LjQ3Nzg5LTIzNi43MzU4OUM0ODcuMzYyNDMsNjQuMTgyMTQsMjk4LjA5ODIsNDMuMDU3NTQsMjQ0LjQ0NjQ1LDBaIiBmaWxsPSJ1cmwoI2IpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjwvZz48L2c+PC9zdmc+",
      },
      {
        text: "Option 2",
        img: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNTAwIDUwMCI+PGRlZnM+PGNsaXBQYXRoIGlkPSJhIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaTTIxMi41ODYsMjQzLjIxNzUyYy00LjAwNzQ1LjkzMjQ4LTcuODQ0MjMtLjc0NDMxLTE0LjI0NzYzLTIuNjkxNzMtNS45ODcxLTEuODIwODEtOC4xMDY3Mi0xLjQ3MjIyLTguMTA2NzItMS40NzIyMmExMDEuNDUzMDksMTAxLjQ1MzA5LDAsMCwxLDEyLjY3MDQzLTcuMjY3MDljNi4zNjA2Mi0yLjkyODY5LDExLjc5MzgtMy4wODEyMiwxNC4zMjEsMi43NDZDMjE4Ljg4NDM4LDIzOC4zNjMxNCwyMTUuODcxMDksMjQyLjQ1MywyMTIuNTg2LDI0My4yMTc1MloiIGZpbGw9Im5vbmUiLz48L2NsaXBQYXRoPjxsaW5lYXJHcmFkaWVudCBpZD0iYiIgeDE9IjM2Ny45NzkzMSIgeTE9IjQ2Ny42MDg0MiIgeDI9IjEzNC40MDI5OSIgeTI9IjYzLjA0MjM3IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+PHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZmY1YTM3Ii8+PHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjZmZhNTJkIi8+PC9saW5lYXJHcmFkaWVudD48L2RlZnM+PHRpdGxlPi08L3RpdGxlPjxnIHN0eWxlPSJpc29sYXRpb246aXNvbGF0ZSI+PGcgY2xpcC1wYXRoPSJ1cmwoI2EpIj48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaIiBmaWxsPSIjZmY1YTM3Ii8+PHBhdGggZD0iTTI5Mi4wNDUsMzExLjM2MTM0czUuOTc0MzMsOTQuNTgyMDctMTA2LjA1OTcsMTA4LjUyOTkxYy03My4xNjE2MSw5LjEwODM2LTEzMC43NDM4My0zNy41MTI4OS0xNTUuNzI2NTktOTYuODk1NDYtMTcuMzkyMTMtNDEuMzQwMDctMTguOTg1MDctODguODY0ODcuOTYzNjMtMTI4LjA3NzE4LDAsMC03Mi42NTUxNiw2OS4yNDk5Mi02OS4zMTQ0NCwxNzIuODkxNjQsMy40Njg5NCwxMDcuNjE5NjMsODguNjI0NTYsMjQ5LjA1MjM4LDQwOC4wOTI1NSwyMDguMTIwNTVDNDc2LjIxMTM3LDU2Mi4zMjI1MSw1MTUuMTY3LDQxMy40OTY4Nyw1MTYuNzQxNjIsMzI1LjEzMDcyLDUxOC42OTk0OSwyMTUuMjU1OSw0NjcuMjg4MTQsMTYzLjE3Nyw0NjcuMjg4MTQsMTYzLjE3N3MyNi44MzEzMiw3Ny42MzI1Mi0zNS4wMTA0MywxMzkuNDc0MjdDMzk3LjgxODcsMzM3LjExMDI1LDMzOS4xODU0OSwzNDkuMDM0NDUsMjkyLjA0NSwzMTEuMzYxMzRaIiBmaWxsPSIjZmZhNTJkIiBvcGFjaXR5PSIwLjQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpsaWdodGVuIi8+PHBhdGggZD0iTTQ2NC41MDUxMSwzNjYuMjM1UzM1Ny42OTIsMzk4LjgyNzA1LDI5Mi4wNDUsMzExLjM2MTM0YzAsMCwyOC43MTkyMywxMTEuMzIyNTYtOTMuNjU3NzUsMTgzLjYxNjQ0LDAsMCw0Mi40MDA3OSwxMjUuNzEwNjUsMTgyLjQ1NzMxLDYzLjMwMjY2QzQyNS43ODQxNyw1MzguMjU1NzMsNDU5LjYzOTI4LDQ0MS40ODMzNSw0NjQuNTA1MTEsMzY2LjIzNVoiIGZpbGw9IiNmZmE1MmQiIG9wYWNpdHk9IjAuNiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOmxpZ2h0ZW4iLz48cGF0aCBkPSJNMjc4LjU0NDM2LDUyNi42MDk4MVMzNDUuMzcwMyw0NDEuNDEwNjMsMjkyLjA0NSwzMTEuMzYxMzRjMCwwLDQ3Ljg4MTQ2LDk3LjgyMTksMTMzLjcwMDEyLDEzMi4zOTM2QzQyNS43NDUxNCw0NDMuNzU0OTQsMzc0LjQyNjM2LDUyOS42NjY4MiwyNzguNTQ0MzYsNTI2LjYwOTgxWiIgZmlsbD0iI2ZmYTUyZCIgb3BhY2l0eT0iMC44IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6bGlnaHRlbiIvPjxwYXRoIGQ9Ik0yMzAuNzc2OTUsMjQ4LjIwMzYzYzQxLjkyOTQ1LTIxLjYxMzEyLDU1LjM3MDExLTU4LjY0MjMxLDU1LjM3MDExLTU4LjY0MjMxczEyLjQyNTM2LTI3Ljc2MzM4LjgyMDUyLTU0LjI4ODgxYzAsMCwyLjQ4NjY2LDMzLjE1NjczLTcyLjk0NDc2LDY4LjM4NTU3LTc1LjQzMTQyLDM1LjIyOTA1LTUyLjIyMTc1LDcwLjQ1Nzg5LTUyLjIyMTc1LDcwLjQ1Nzg5LDMuOTQ5OC0zLjUyMTQzLDcuNzA3NjctNS44OTQ2MSwxNS4xNTQ4NS03Ljg5ODA4QzE4OS4zNjc4NywyNjIuODc4NzYsMjA4LjkwNDI0LDI1OS40NzgyMiwyMzAuNzc2OTUsMjQ4LjIwMzYzWiIgZmlsbD0iI2ZmYTUyZCIgb3BhY2l0eT0iMC42IiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjxwYXRoIGQ9Ik0yMzIuOTM4MjYsMjYzLjU0ODk0YzMyLjQwNTYsMCw2OS44OTMtMTUuMDYyNTQsODguNDQzMjYtNDguNjk1MTksMi44OTg3LTUuMjU1NSw1LjQ4MTA3LTEzLjc4ODMxLDYuNzY0OTEtMjEuODE2NTQsMi4wNDYyOS0xMi43OTYxMiwyLjI1Nzc5LTIyLjMxNjc1LS4xMDgwNy0zOS42MDYsMCwwLTYuMTQyNjEsMTcuMjA0NTMtNDEuODkxMzEsMzYuMTMwMTQtMTIuOTc1OTQsNi44Njk1NS0yOS42MTE3MiwxMy43MzkzLTUxLjYxMDY4LDIwLjQxNTYyLTg1LjIzODUsMjUuODY4NDktNzIuNzM1MzEsNjQuMTM5LTcyLjczNTMxLDY0LjEzOUMxNzUuMjMzNjEsMjY1LjIyNSwxNzUuMzE0NjYsMjYzLjU0ODk0LDIzMi45MzgyNiwyNjMuNTQ4OTRaIiBmaWxsPSIjZmZhNTJkIiBvcGFjaXR5PSIwLjQiIHN0eWxlPSJtaXgtYmxlbmQtbW9kZTpvdmVybGF5Ii8+PHBhdGggZD0iTTIzMi45MzgyNiwyNjMuNTQ4OTRjMjkuNzkxMjYsMCw3MC4yOTM2NSwxLjY3NTI2LDkxLjMzMDQ4LTE1Ljk1ODE5LDEyLjkwMTE3LTEwLjgxNCwyNC42ODAzMi0yNS4xMDU2NywyNC45MDIxNy00Ni44ODQ3LDAsMC0xNy42NDc0MywxMS42NDc4OC0yNy43OTMsMTQuMTUyMzMtMTQuMDM0MjIsMy40NjQzNi0zOS4yODcsOC43Nzc1Ni02Mi4zOTEsNy40NjYxLTc4LjQwNTQxLTQuNDUwNTUtOTcuMTg1OCw1MS43OTE0OC05Ny4xODU4LDUxLjc5MTQ4QzE3Mi42MTMsMjY0LjExNzM2LDE4NS43NywyNjMuNTQ4OTQsMjMyLjkzODI2LDI2My41NDg5NFoiIGZpbGw9IiNmZmE1MmQiIG9wYWNpdHk9IjAuMiIgc3R5bGU9Im1peC1ibGVuZC1tb2RlOm92ZXJsYXkiLz48cGF0aCBkPSJNMjQ0LjQ0NjQ1LS40OTEyNXMtLjA1MjE2LDIwLjgwOTcsNTQuMzQ1NjIsNTMuODU4ODJjMTA1LjYxNzIsNjQuMTY3MjUsMTA1LjI2MTIzLDEyMi45OTQwNiwxMDUuMjYxMjMsMTM1LjMzOTIxLDAsNTIuNDQwNzYtNTQuNTgsODYuMzQwNTktNzkuOTA0NjgsNTguOTAzNTgsMCwwLDI0Ljg0OTA1LTE4LjQ0MTg0LDI0Ljg0OTA1LTQ2Ljc5OTI3LDAsMC0xOC4yMjI2NSwxMi4wMTA1LTI3Ljc0ODEyLDE0LjA4MTI5LDAsMCwxMi40MjQ1My0yMS45NTAyMSw2LjYyNjQtNjAuNDY2MzEsMCwwLTkuOTM5NDksMTkuNDY1MTctNDEuODI5MTksMzUuMjAzLDAsMCwxMi40MjQ1My0yNy43NDgxMi44MjgyNy01NC4yNTM5NCwwLDAsMi40ODQ4MiwzMy4xMzIyMi03Mi44OTA4Myw2OC4zMzUtNzUuMzc1NjUsMzUuMjAzLTUyLjE4MzE0LDcwLjQwNTgxLTUyLjE4MzE0LDcwLjQwNTgxczE1LjAyNTYxLTE1Ljk1NTk0LDQwLjUzNTIyLTQuNzQ5ODFjMzQuNTExMjQsMTUuMTYwMzksMjAuNTY0NTUsNzUuOTk4MzktMzQuOTMxOSw3NS45OTgzOS01NC4wMzA4OCwwLTg5LjQ5NTMzLTU4Ljc1OS04OS40OTUzMy0xMDQuNjQxODcsMC0xOC45NzEsMi4wNTY1LTUzLjg3MzM1LDM2LjMzMTUxLTkyLjI2MTM2LDI3LjI2MTYyLTMwLjUzMyw2MC44Nzc4LTQ2LjY0MjM5LDY4LjA5My04MC40MDU2OEMxNDQuOTczODEsMTAyLjY3MzM4LDc3LjYxNDIyLDEyNS4yNjUwNSwzNy41NTYyMiwxODQuNTA3NDljLTM1Ljk4MDksNTMuMjEyNzQtMjQuMjk5MDgsMTIzLjU5NzMzLTE3LjgyMTg2LDE0NS4yNDgsMjkuMzc1LDk4LjE4ODY4LDEyMC40MDUyOCwxNjkuNzUzMjgsMjI4LjE1MDE3LDE2OS43NTMyOCwxMzEuNTAyOTMsMCwyMzkuNDc3ODktMTA1LjIzMzE5LDIzOS40Nzc4OS0yMzYuNzM1ODlDNDg3LjM2MjQzLDYzLjY5MDg5LDI5OC4wOTgyLDQyLjU2NjI5LDI0NC40NDY0NS0uNDkxMjVaIiBmaWxsPSJ1cmwoI2IpIiBzdHlsZT0ibWl4LWJsZW5kLW1vZGU6b3ZlcmxheSIvPjwvZz48L2c+PC9zdmc+",
      },
      {
        text: "Option 3",
        img: "sap-icon://sap-ui5",
      },
    ])
  }
}).then(view => view.placeAt("content"))));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-async="true"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="true"
></script><body id="content" class="sapUiBody" style="height: 100%;"></body>

^{[1]：如果是sap.m.StandardListItem，请注意它只支持quadrat比例的图像。^src不同比例的图像将显示不正确}

Answer 2

我实现了图像单选按钮选项：

我将容器内的图像和单选按钮分组以进行垂直/水平对齐（VBox / HBox）。
我们需要做的就是聚合选项的数量。为此，我使用了父容器。

因此，有两个容器：一个用于整体收容，另一个用于放射性按钮/图像对齐。

<强>结果：

RadioButton上面的图片：

带有radiobutton的图像

<强>代码：

数据：

         var data = {
                    answers: [
                        {
                            AnswerLabel: "Excellent",
                            SmileyUrl :"./images/satisfied.jpg"
                        },
                        {
                            AnswerLabel: "Good",
                            SmileyUrl :"./images/good.jpg"
                        },
                        {
                            AnswerLabel: "Neutal",
                            SmileyUrl :"./images/neutral.jpg"
                        },
                        {
                            AnswerLabel: "Poor",
                            SmileyUrl :"./images/bad.jpg"
                        },
                        {
                            AnswerLabel: "Horrible",
                            SmileyUrl :"./images/horrible.jpg"
                        }
                    ]
            };
            var model = new sap.ui.model.json.JSONModel(data);
            this.getView().setModel(model, "view");

查看：

RadioButton上面的图片：

    <HBox items="{view>/answers}" 
        justifyContent="SpaceAround" 
        class='sapUiMediumMarginTop'> <!-- This is Parent Container -->
        <VBox alignItems='Center'> <!-- Alignment of radioButton and image. Change to VBox/HBox for vertical/horizontal alignment -->
            <items>
                <Image 
                    src="{view>SmileyUrl}" 
                    width="3rem"/> <!-- Image to be displayed -->
                <RadioButton
                    groupName='answers'
                    text="{view>AnswerLabel}" /> 
            </items>
        </HBox>
    </VBox>

图像旁边的radiobutton

        <HBox items="{view>/answers}" 
        justifyContent="SpaceAround" 
        class='sapUiMediumMarginTop'> <!-- This is Parent Container -->
        <HBox alignItems='Center'> <!-- Alignment of radioButton and image. Change to VBox/HBox for vertical/horizontal alignment -->
            <items>
                <Image 
                    src="{view>SmileyUrl}" 
                    width="3rem"/> <!-- Image to be displayed -->
                <RadioButton
                    groupName='answers'
                    text="{view>AnswerLabel}" /> 
            </items>
        </HBox>
    </HBox>

如果您需要更多解释和信息，请与我们联系。

将图像/图标添加到单选按钮

2 个答案: