最終變體Map = HashMap<String, List>();
在這張地圖中，我有
key -> ["color"] = value -> ["White", "Black"]; 鍵 -> ["ram"] = 值 -> ["128GB", "256GB"];
基于這些資訊，我設計了以下 UI。
**我想要 -> 如果我選擇白色，白色將被選中，黑色將保持未選中狀態。如果我選擇黑色白色將變為未選擇。拉姆也是如此。選擇一個將使另一個未選擇。兩個串列視圖選擇將獨立作業。**
對于單個串列視圖，我們可以使用 selectedIndex 變數來實作這一點。
這是 API 回應。這里屬性值可以是多個。但我需要在 UI 中顯示一個值。所以經過一些邏輯，我將標簽和值存盤到地圖中。
"productVariation": [
{
"price": 406089.25,
"qty": 449,
"variationAttribute": [
{
"attribute_value": "White",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "128GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 292561.69,
"qty": 246,
"variationAttribute": [
{
"attribute_value": "White",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "256GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 951456.88,
"qty": 828,
"variationAttribute": [
{
"attribute_value": "Black",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "128GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
},
{
"price": 930735.09,
"qty": 321,
"variationAttribute": [
{
"attribute_value": "Black",
"attributeDetails": {
"attributeLabel": [
{
"label": "Color"
}
]
}
},
{
"attribute_value": "256GB",
"attributeDetails": {
"attributeLabel": [
{
"label": "Ram"
}
]
}
}
]
}
]
這是用戶界面代碼。此代碼用于底部作業表對話框。
variationView() {
final widgets = <Widget>[];
var i = 1; // maintain vertical dot line between variation
for (var key in widget.controller.variationMap.keys) {
final list = widget.controller.variationMap[key];
widgets.add(
GlobalText(
str: "Select $key",
fontSize: 18,
fontWeight: FontWeight.w300,
),
);
widgets.add(
const SizedBox(
height: 20,
),
);
widgets.add(
SizedBox(
height: 60,
child: ListView.builder(
itemCount: list!.length,
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemBuilder: (ctx, index) {
return GestureDetector(
onTap: () {
setState(() {
isSelectedIndex = index;
isSelectedIndexForListView = i;
});
},
child:Container(
margin: EdgeInsets.only(right: 11),
padding: EdgeInsets.all(4),
width: 60,
height: 55,
decoration: BoxDecoration(
color: Color(0xfff8f8f8),
borderRadius: BorderRadius.circular(10),
border: Border.all(
color: isSelectedIndex == index && isSelectedIndexForListView == i
? Colors.black
: Color(0xffe2e2e2),
width: 1,
),
),
child: Center(
child: GlobalText(
str: list[index],
color: Color(0xff535960),
fontSize: 13,
fontWeight: FontWeight.w400,
maxLines: 2,
),
),
),
);
},
),
),
);
if (i < widget.controller.variationMap.keys.length) {
widgets.add(
const SizedBox(
height: 30,
),
);
}
i ;
}
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: widgets,
);
}
I have tried multiple ways but failed to hold or manage the state of the selected item.
In this code, I have tried to hold the index of the list view and another for item selected index. but When I select a ram, So same index color also goes selected and vice versa.
I have also tried using Unique key. But failed to solve the problem.
uj5u.com熱心網友回復：
首先，您可以為 Value 創建一個模型類，該類必須將一個欄位用于另一個值名稱，以檢查它是否被選中。
class Value{
String valueName;
bool isSelected;
}
然后創建另一個類，該類將具有一個 String 型別的欄位，即標簽和另一個型別 List of Value 物件的欄位。
class Model {
String label;
List<Value> valueList;
}
從您的控制器或視圖模型類或您用來更新狀態的類，您只需更新isSelected欄位的值。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/351713.html
標籤：flutter listview flutter-listview