在 Flutter 中使用 onDetailsPressed 的範例
在 Flutter 中， `onDetailsPressed` 最常用於 `ExpansionPanelList` Widget 中。 `ExpansionPanelList` 是一個可以擴展和收縮的 Widget，當用戶點擊時可以顯示或隱藏詳細資訊。
以下範例演示如何在 `ExpansionPanelList` 中使用 `onDetailsPressed` ：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ExpansionPanelList Demo',
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
List<Item> _data = generateItems(8);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('ExpansionPanelList Demo'),
),
body: SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text('Item ${item.headerValue}'),
);
},
body: ListTile(
title: Text('Details ${item.expandedValue}'),
subtitle: Text('Subtitle ${item.expandedValue}'),
trailing: Text('Trailing ${item.expandedValue}'),
onTap: () {
print('onDetailsPressed ${item.expandedValue}');
}),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}
class Item {
Item({
required this.expandedValue,
required this.headerValue,
required this.isExpanded,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Header $index',
expandedValue: 'This is item number $index',
isExpanded: false,
);
});
}
在上面的範例中，當用戶點擊面板的詳細資訊時，將會印出 `onDetailsPressed` 以及展開的項目資訊。
留言
張貼留言