0

カスケードで（C ++またはQMLのいずれかで）単純なListViewを作成したいと思います。ListViewのデータは単純で、渡したい文字列だけです（XMLやSQLなどはありません）。また、ListViewにはセクションが含まれる場合があります。 

 - Green
        - Cucumber
        - Peas
        - Salad
 - Red
        - Tomato
        - Red Radish
        - Carrot

また、リストビューのアイテムの外観と、場合によってはリストビュー自体をカスタマイズできるようにしたい（たとえば、背景色の設定、リストアイテムのテキストの色の設定など）。

私が上で書いたことを達成するチュートリアルや簡単なサンプルアプリは大歓迎です!!

ありがとうございました。

4

2 に答える 2

2

静的リストのみを使用する場合 (つまり、実行時に変更したくない場合) の最も簡単な方法は、次のように XML ファイル (フォルダー内の a などmodel.xml)からロードすることです。assets

<model>
    <header title="Green"/>
    <item title="Cucumber"/>
    <item title="Peas"/>
    <item title="Salad"/>
    <header title="Red"/>
    <item title="Tomato"/>
    <item title="Red Radish"/>
    <item title="Carrot"/>
</model>

あなたの ListView はそれをロードするだけです:

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
}

ここで、外観をカスタマイズしたい場合は、listItemComponents にどのように表示したいかを入力するだけです。

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                // your personal code
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                // your personal code
            }
        }
    ]
}

これらのコンテナを使用すると、独自のレイアウトを定義できます。たとえば、一致する背景色でヘッダーを表示したい場合は、次のようにします。

ListView {
    dataModel: XmlDataModel {
        source: "model.xml"
    }
    listItemComponents: [
        ListItemComponent {
            type: "header"
            Container {
                background: {
                    if (ListItemData.title == "Green") {
                        return Color.Green
                    } else {
                        return Color.Red
                    }
                }
                Header {
                    title: ListItemData.title
                }
            }
        },
        ListItemComponent {
            type: "item"
            Container {
                preferredHeight: 100
                Label {
                    text: ListItemData.title
                    verticalAlignment: VerticalAlignment.Center
                }
                Divider {}
            }
        }
    ]
}

これがどのように機能するかについてのアイデアを与えてくれたことを願っています.

于 2013-03-06T20:32:55.600 に答える
0

私が正しく理解している場合はExpandableListView、Androidのように、実装bb::cascades::DataModel例を使用してそれを達成できますここに

于 2013-03-09T19:28:22.243 に答える