listview - 具有给定 xml 模型的列表视图

Question

嗨，我是 Blackberry 10 级联开发的新手。

我想使用以下数据模型（放置在assets文件夹中）创建一个列表。

类别.xml

 <?xml version="1.0" encoding="utf-8"?>
 <MasterData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"    xmlns:xsd="http://www.w3.org/2001/XMLSchema">
 <CategoryList>
    <Category>
       <CategoryId>12</CategoryId>
       <CategoryNameEn>Banks &amp; Investments</CategoryNameEn>
       <CategoryImageName>banks.png</CategoryImageName>
       <DisplayOrder>1</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>15</CategoryId>
       <CategoryNameEn>Car Rental</CategoryNameEn>
       <CategoryImageName>cars.png</CategoryImageName>
       <DisplayOrder>2</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>19</CategoryId>
       <CategoryNameEn>Services</CategoryNameEn>
       <CategoryImageName>services.png</CategoryImageName>
       <DisplayOrder>3</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>18</CategoryId>
       <CategoryNameEn>Real Estate &amp; Constructions</CategoryNameEn>
       <CategoryImageName>construction.png</CategoryImageName>
       <DisplayOrder>5</DisplayOrder>
    </Category>
    <Category>
       <CategoryId>2</CategoryId>
       <CategoryNameEn>Hotels &amp; Apartments</CategoryNameEn>
       <CategoryImageName>hotels.png</CategoryImageName>
      <DisplayOrder>7</DisplayOrder>
    </Category>
 </CategoryList>

我想将唯一的CategoryNameEn显示为列表项。

在main.qml我已经给出了这样的。

    // Create a ListView that uses an XML data model
ListView {
    dataModel: XmlDataModel {
        source: "asset:///categories.xml"
    }
    // The ListItemComponent defines how "listItem" items should appear. 
    listItemComponents: [
        ListItemComponent {
            type: "Category" //setting the node name
            Container {
                preferredWidth: 748
                preferredHeight: 50
                background: Color.Blue

                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }

                Label {
                    text: ListItemData.CategoryNameEn //setting the node 
                    verticalAlignment: VerticalAlignment.Center
                    // Apply a text style to create a title-sized font
                    // with normal weight
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
                Container {
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Center
                    preferredWidth: 50
                    preferredHeight: 50
                    //background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.RightToLeft
                    }
                    // Arrow image
                    ImageView {
                        verticalAlignment: VerticalAlignment.Center
                        translationX: 0
                        translationY: 0
                        imageSource: "asset:///images/arrow.png"
                        rightMargin: 10
                    }
                } // end of inner Container
            }//end of outer container
         } // end of ListItemComponent
    ]//end of listItemComponents
}//end of ListView

输出应如下图所示。

但是列表是空的。CategoryNameEn未绑定到列表。我不知道我的代码有什么问题。请解决我的问题。

Answer 1

在这里，我没有修复您的 XML，只是一个如何修复它的小示例。XML:

 <model>
    <item CategoryNameEn="Banks &amp; Investments" CategoryId="12"  CategoryImageName="banks.png" DisplayOrder="1"/>
    <item CategoryNameEn="Banks &amp; Investments2" CategoryId="33"  CategoryImageName="banks2.png" DisplayOrder="2" />    
 </model>

QML：

ListView {
    dataModel: XmlDataModel {

        source: "asset:///categories.xml"
    }
    // The ListItemComponent defines how "listItem" items should appear.
    listItemComponents: [
        ListItemComponent {
            type: "item" //setting the node name
            Container {
                preferredWidth: 748
                preferredHeight: 50
                background: Color.Blue

                layout: StackLayout {
                    orientation: LayoutOrientation.LeftToRight
                }

                Label {
                    text: ListItemData.CategoryNameEn //setting the node
                    verticalAlignment: VerticalAlignment.Center
                    // Apply a text style to create a title-sized font
                    // with normal weight
                    textStyle {
                        base: SystemDefaults.TextStyles.TitleText
                        fontWeight: FontWeight.Normal
                    }
                }
                Container {
                    horizontalAlignment: HorizontalAlignment.Fill
                    verticalAlignment: VerticalAlignment.Center
                    preferredWidth: 50
                    preferredHeight: 50
                    //background: Color.Blue

                    layout: StackLayout {
                        orientation: LayoutOrientation.RightToLeft
                    }
                    // Arrow image
                    ImageView {
                        verticalAlignment: VerticalAlignment.Center
                        translationX: 0
                        translationY: 0
                        imageSource: "asset:///images/arrow.png"
                        rightMargin: 10
                    }
                } // end of inner Container
            } //end of outer container
        } // end of ListItemComponent
    ] //end of listItemComponents
}    //end of ListView