自定义钛中搜索栏的取消按钮

Question

我正在做一个钛合金项目。我需要一个自定义的搜索栏，如下所示。

但是当我创建搜索栏时，它看起来像；

我想更改取消按钮的图像。我搜索了很多自定义钛搜索栏，但找不到任何解决方案。

我正在通过以下方式创建搜索栏：

var searchLocation = Ti.UI.createSearchBar({ 
    showCancel:true,
    height:55,
    top:45,
    width:'102%',
    backgroundImage:"../../Images/bg_search.png",
    borderRadius:'5'
});

---

然后我尝试了一些不同的东西。

1. 我创建了一个视图、一个没有取消按钮的搜索栏和一个自定义按钮。
2. 在该视图中添加了搜索栏

3. 在该搜索栏的右侧添加了按钮。

   //holder view
   var searchHolder = Ti.UI.createView({
      height   : 55,
      width    : '100%',
      top      : 45,
      backgroundImage:"../../Images/bg_header@2x.png",
      layout   : 'horizontal'
   });
   
   //search bar
   var serLocation = Ti.UI.createSearchBar({
      height:55,
      top:0,
      width:'85%',
      backgroundImage:"../../Images/bg_header@2x.png"
   });
   
   //Calendar button
   var calButton = Ti.UI.createButton({
      height   : 45,
      width    : 45,
      backgroundImage:"../../Images/nav_calendar.png"
   });
   
   searchHolder.add(serLocation);
   searchHolder.add(calButton );
   

效果很好。

但我正在寻找任何替代解决方案。有没有内置的方法可以做到这一点？

提前致谢。

Answer 1

对此没有内置方法。您的工作解决方案是最好的解决方案。