1

This week I started learning SproutCore. I quite like the framework, but hate the absence of learning material. After going through most of the guides I decided to learn by trying to build something. I wrote a little GridView with buttons in it, but the buttons seem to be distorted, there are labelless blue copies under each button, and a couple of pink lines. What is this? Why is this? How do I get rid of it?

Relevant code:

buttons: SC.GridView.design({
  layout: { centerX: 0, top: 40, width: 300, height: 120 },
  columnWidth: 120,
  rowHeight: 58,
  contentBinding: SC.Binding.oneWay('Calculator.buttons'),
  exampleView: SC.ButtonView.extend({
    titleBinding: SC.Binding.oneWay('.content')
  })
})

And:

Calculator.buttons = '1 2 3 4 5 6 7 8 9 0 + - / x ='.w()
4

1 回答 1

1

按钮和许多其他样式的小部件具有由主题定义的特定高度。设置 controlSize 和按钮的高度（在您的情况下为 GridView 中的 rowHeight ）以匹配以下之一：

  • SC.SMALL_CONTROL_SIZE: 18 像素
  • SC.REGULAR_CONTROL_SIZE: 24 像素
  • SC.HUGE_CONTROL_SIZE: 30 像素
  • SC.JUMBO_CONTROL_SIZE: 44 像素

例如：

buttons: SC.GridView.design({
  layout: { centerX: 0, top: 40, width: 300, height: 120 },
  columnWidth: 120,
  rowHeight: 44,
  contentBinding: SC.Binding.oneWay('Calculator.buttons'),
  exampleView: SC.ButtonView.extend({
    titleBinding: SC.Binding.oneWay('.content'),
    controlSize: SC.JUMBO_CONTROL_SIZE
  })
})

主题中使用的所有图像都被拆分成几个主文件，并且 CSS 用于选择要显示的平铺图像的哪一部分。您所看到的是图形“溢出”并显示用于其他用途的图像部分。这足够有意义吗？

于 2013-05-27T16:26:46.120 回答