我有這樣一個列，由標題和通過List.generate創建的內容組成。請告訴我如何創建一個將這個串列折疊成一個標題的影片，實際上是通過點擊標題本身？
Column(
兒童。[
GestureDetector(
onTap: () {},
孩子。容器(
color: Theme.of(context).sliderTheme.inactiveTrackColor,
width: MediaQuery.of(context).size.width,
孩子。padding(
padding: const EdgeInsets.symmetric（vertical: 3）。
孩子。中心(
孩子。Text('${category.name}'。
風格。Theme.of(context).textTheme.headline6.copyWith(
字體大小。16,
color: Theme.of(context).selectedRowColor))。
),
),
),
),
列(
兒童。List.generate(category.items.length, (index) {
return Container(
裝飾。BoxDecoration(
邊界。(index 1) != category.items.length
? 邊框(
底部。BorderSide(
color: Style.inactiveColorDark.withOpacity(1.0) 。
寬度: 0.5))
: null）。)
孩子。padding(
padding:
const EdgeInsets.symmetric( vertical: 12.0, horizontal: 24）。)
孩子。行(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
兒童。[
行(
children: [
容器(
width: 12,
高度。12。
裝飾。BoxDecoration(
color: Color(int.parse(category.color))。
形狀。BoxShape.circle）。)
),
SizedBox(
width: 12,
),
Text('${category.items[index].description}'。
風格。Theme.of(context)
.primaryTextTheme
.headline1
.copyWith(fontSize: 16) )。
],
),
開關按鈕(
isActive: category.items[index].isAdded,
activeColor:
Theme.of(context).sliderTheme.activeTrackColor。
非活動顏色。
Theme.of(context).sliderTheme.inactiveTrackColor。
activeCircleColor:
Theme.of(context).sliderTheme.activeTickMarkColor。
非活動圓圈顏色。
Theme.of(context).sliderTheme.inactiveTickMarkColor。
開啟。() {
ChosenFeeling removingElement = ChosenFeeling(
id: 000,
isAdded: false,
);
//如果選擇的串列是空的。
if (chosenfeelings.isEmpty) {
chosenfeelings.add(ChosenFeeling(
isAdded: true, id: category.items[index].id) )。
} else {
// If user tap on switchButton 2 times[/span].
chosenfeelings.removeWhere((element) {
if (element.id != null & &
element.id == category.items[index].id) {
removingElement = element;
}
return _isNeedToRemoveWhenOn(
currentItem: category.items[index],
listItem: element,
);
});
// If list isn`t empty and chosen item isn`t in listif (category.items[index].id != removingElement.id) {
chosenfeelings.add(ChosenFeeling(
id: category.items[index].id,
isAdded: true,
));
}
}
},
關閉: () {
ChosenFeeling removingElement = ChosenFeeling(
id: 000,
isAdded: false,
);
if (chosenfeelings.isEmpty) {
chosenfeelings.add(ChosenFeeling(
id: category.items[index].id,
isAdded: false,
));
} else {
// If user tap on switchButton 2 times[/span].
chosenfeelings.removeWhere((element) {
if (element.id != null & &
element.id == category.items[index].id) {
removingElement = element;
}
return _isNeedToRemoveWhenOff(
currentItem: category.items[index],
listItem: element,
);
});
// If list isn`t empty and chosen item isn`t in listif (category.items[index].id != removingElement.id) {
chosenfeelings.add(ChosenFeeling(
id: category.items[index].id,
isAdded: false,
));
}
}
},
)
],
),
),
);
}),
)
],
);
uj5u.com熱心網友回復：
最簡單的方法是使用可擴展包來實作這一目的。 https://pub.dev/packages/expandable
在構建方法之外創建可擴展控制器
span class="hljs-keyword">final ExpandableController _expandableController = ExpandableController();
然后像這樣使用它：
ExpandableNotifier(
控制器。_expandableController,
孩子。Column(
children: [
Expandable(
collapsed: ExpandableButton(
child: titleWidget(),
),
擴大的。列(
兒童。[
ExpandableButton(
child: titleWidget(),
),
list(),
]
),
),
],
),
);
使用完控制器后不要忘記處置它
void dispose() {
_expandableController.dispose()。
super.dispose()。
希望這有幫助。你也可以通過一點研究來創建你自己的影片
。轉載請註明出處，本文鏈接：https://www.uj5u.com/net/319379.html
標籤：