請問我在這里做錯了什么。我試圖在展開的面板串列中有一個串列視圖，如果我只呈現兩個展開的串列，則代碼運行沒有錯誤。但是如果我渲染了兩個以上，并且我嘗試擴展任何其他面板串列，它會回傳以下錯誤作為 RangeError (RangeError (index): Invalid value: Not in inclusive range 0..1: 2.
下面是我的代碼示例。謝謝你們。
ExpansionPanelList(
children: [
ExpansionPanel(
isExpanded: _isOpen[0],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10.w),
Center(
child: Text(
"Ball Games ? ??",
style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10.w),
Center(
child: Text(
"Racket & Bat ??",
style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10.w),
Center(
child: Text(
'Winter ??',
style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10.w),
Center(
child: Text(
'Water ???♀? ',
style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10.w),
Center(
child: Text(
'Others ????',
style: TextStyle(
fontSize: 17.sp,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
],
expansionCallback: (i, isOpen) {
setState(() {
_isOpen[i] = !isOpen; //this is where the error is pointing to
});
},
這是我在展開的面板主體中回傳的串列視圖
Widget _myListView() {
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: List1.keys.map((String key) {
return new CheckboxListTile(
title: new Text(key),
value: List1[key],
activeColor: Colors.black,
checkColor: Colors.white,
onChanged: (bool? value) {
setState(() {
List1[key] = value!;
});
},
);
}).toList(),
),
);
}
串列1
Map<String, bool> List1 = {
'Bubble Football ?': false,
'Futsal ??': false,
'Beach Volleyball ??': false,
'Volleyball ??': false,
'Dodgeball ??': false,
'Rugby ??': false,
'American Footbal ??': false,
'Korftbal ??': false,
'Netbal ?': false,
};
List<bool> _isOpen = [true, false];
謝謝。
uj5u.com熱心網友回復：
問題來自_isOpen因為它只包含兩個值但用于五個小部件。bool在這種情況下，我們需要制作包含五個的串列。
List<bool> _isOpen = [true, false, false, false, false];
并在每個上使用唯一索引 ExpansionPanel
ExpansionPanelList(
children: [
ExpansionPanel(
isExpanded: _isOpen[0],
headerBuilder: (context, isOpen) {
return Row(
children: const [
SizedBox(width: 10),
Center(
child: Text(
"Ball Games ? ??",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[1],
headerBuilder: (context, isOpen) {
return Row(
children: const [
SizedBox(width: 10),
Center(
child: Text(
"Racket & Bat ??",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[2],
headerBuilder: (context, isOpen) {
return Row(
children: const [
SizedBox(width: 10),
Center(
child: Text(
'Winter ??',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[3],
headerBuilder: (context, isOpen) {
return Row(
children: const [
SizedBox(width: 10),
Center(
child: Text(
'Water ???♀? ',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
ExpansionPanel(
isExpanded: _isOpen[4],
headerBuilder: (context, isOpen) {
return Row(
children: const [
SizedBox(width: 10),
Center(
child: Text(
'Others ????',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
),
],
expansionCallback: (i, isOpen) {
setState(() {
_isOpen[i] = !isOpen;
});
},
)
uj5u.com熱心網友回復：
@YeasinSheikh 已經在前面的回答中提到了。對于擴展面板，您必須為每個擴展圖塊使用唯一索引，并且只要按下擴展/折疊按鈕之一，就會呼叫回呼。傳遞給回呼的引數是按下面板的索引以及面板當前是否展開。
還有一點，bool list的維護成本很高，可以動態嘗試。
Column(
children: [
Expanded(
child: SingleChildScrollView(
child: Column(
children: [
ExpansionPanelList(
children: List.generate(
List2.length,
(index) => expansionPanel(
_selected_box.contains(index),
"${List2[index]}"),
),
expansionCallback: (i, isOpen) {
setState(() {
if (_selected_box.contains(i))
_selected_box.remove(i);
else
_selected_box.add(i);
});
},
)
],
),
),
)
],
)
擴展面板小部件
ExpansionPanel expansionPanel(bool isbool, String expansionTitle) {
return ExpansionPanel(
isExpanded: isbool ?? false,
headerBuilder: (context, isOpen) {
return Row(
children: [
SizedBox(width: 10),
Center(
child: Text(
"$expansionTitle",
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w400,
color: Color(0xff333333)),
),
),
],
);
},
body: SingleChildScrollView(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
_myListView(),
// _myListView(),
],
),
),
);
}
這是我在展開的面板主體中回傳的串列視圖
Widget _myListView() {
return MediaQuery.removePadding(
context: context,
removeTop: true,
child: ListView(
shrinkWrap: true,
physics: ScrollPhysics(),
children: List1.keys.map((String key) {
return new CheckboxListTile(
title: new Text(key),
value: List1[key],
activeColor: Colors.black,
checkColor: Colors.white,
onChanged: (bool? value) {
setState(() {
List1[key] = value!;
});
},
);
}).toList(),
),
);
}
完整源代碼鏈接。
有關ExpansionCallBack 的更多資訊
閱讀有關擴展面板的更多資訊
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/386108.html