mirror of
https://github.com/flutter/flutter
synced 2024-09-19 08:11:56 +00:00
Adds a Listview tile select example (#99165)
This commit is contained in:
parent
5ae4885e5e
commit
67a0df41cd
239
examples/api/lib/widgets/scroll_view/listview_select.1.dart
Normal file
239
examples/api/lib/widgets/scroll_view/listview_select.1.dart
Normal file
|
@ -0,0 +1,239 @@
|
|||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
// Flutter code sample for ListTile selection in a ListView or GridView
|
||||
// Long press any ListTile to enable selection mode.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
void main() => runApp(const MyApp());
|
||||
|
||||
class MyApp extends StatelessWidget {
|
||||
const MyApp({Key? key}) : super(key: key);
|
||||
|
||||
static const String _title = 'Flutter Code Sample';
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return const MaterialApp(
|
||||
title: _title,
|
||||
home: ListTileSelectExample(),
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class ListTileSelectExample extends StatefulWidget {
|
||||
const ListTileSelectExample({Key? key}) : super(key: key);
|
||||
|
||||
@override
|
||||
ListTileSelectExampleState createState() => ListTileSelectExampleState();
|
||||
}
|
||||
|
||||
class ListTileSelectExampleState extends State<ListTileSelectExample> {
|
||||
bool isSelectionMode = false;
|
||||
final int listLength = 30;
|
||||
late List<bool> _selected;
|
||||
bool _selectAll = false;
|
||||
bool _isGridMode = false;
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
initializeSelection();
|
||||
}
|
||||
|
||||
void initializeSelection() {
|
||||
_selected = List<bool>.generate(listLength, (_) => false);
|
||||
}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_selected.clear();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Scaffold(
|
||||
appBar: AppBar(
|
||||
title: const Text(
|
||||
'ListTile selection',
|
||||
),
|
||||
leading: isSelectionMode
|
||||
? IconButton(
|
||||
icon: const Icon(Icons.close),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
isSelectionMode = false;
|
||||
});
|
||||
initializeSelection();
|
||||
},
|
||||
)
|
||||
: const SizedBox(),
|
||||
actions: <Widget>[
|
||||
if (_isGridMode)
|
||||
IconButton(
|
||||
icon: const Icon(Icons.grid_on),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isGridMode = false;
|
||||
});
|
||||
},
|
||||
)
|
||||
else
|
||||
IconButton(
|
||||
icon: const Icon(Icons.list),
|
||||
onPressed: () {
|
||||
setState(() {
|
||||
_isGridMode = true;
|
||||
});
|
||||
},
|
||||
),
|
||||
if (isSelectionMode)
|
||||
TextButton(
|
||||
child: !_selectAll
|
||||
? const Text(
|
||||
'select all',
|
||||
style: TextStyle(color: Colors.white),
|
||||
)
|
||||
: const Text(
|
||||
'unselect all',
|
||||
style: TextStyle(color: Colors.white),
|
||||
),
|
||||
onPressed: () {
|
||||
_selectAll = !_selectAll;
|
||||
setState(() {
|
||||
_selected =
|
||||
List<bool>.generate(listLength, (_) => _selectAll);
|
||||
});
|
||||
}),
|
||||
],
|
||||
),
|
||||
body: _isGridMode
|
||||
? GridBuilder(
|
||||
isSelectionMode: isSelectionMode,
|
||||
selectedList: _selected,
|
||||
onSelectionChange: (bool x) {
|
||||
setState(() {
|
||||
isSelectionMode = x;
|
||||
});
|
||||
},
|
||||
)
|
||||
: ListBuilder(
|
||||
isSelectionMode: isSelectionMode,
|
||||
selectedList: _selected,
|
||||
onSelectionChange: (bool x) {
|
||||
setState(() {
|
||||
isSelectionMode = x;
|
||||
});
|
||||
},
|
||||
));
|
||||
}
|
||||
}
|
||||
|
||||
class GridBuilder extends StatefulWidget {
|
||||
const GridBuilder({
|
||||
Key? key,
|
||||
required this.selectedList,
|
||||
required this.isSelectionMode,
|
||||
required this.onSelectionChange,
|
||||
}) : super(key: key);
|
||||
|
||||
final bool isSelectionMode;
|
||||
final Function(bool)? onSelectionChange;
|
||||
final List<bool> selectedList;
|
||||
|
||||
@override
|
||||
GridBuilderState createState() => GridBuilderState();
|
||||
}
|
||||
|
||||
class GridBuilderState extends State<GridBuilder> {
|
||||
void _toggle(int index) {
|
||||
if (widget.isSelectionMode) {
|
||||
setState(() {
|
||||
widget.selectedList[index] = !widget.selectedList[index];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return GridView.builder(
|
||||
itemCount: widget.selectedList.length,
|
||||
gridDelegate:
|
||||
const SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
|
||||
itemBuilder: (_, int index) {
|
||||
return InkWell(
|
||||
onTap: () => _toggle(index),
|
||||
onLongPress: () {
|
||||
if (!widget.isSelectionMode) {
|
||||
setState(() {
|
||||
widget.selectedList[index] = true;
|
||||
});
|
||||
widget.onSelectionChange!(true);
|
||||
}
|
||||
},
|
||||
child: GridTile(
|
||||
child: Container(
|
||||
child: widget.isSelectionMode
|
||||
? Checkbox(
|
||||
onChanged: (bool? x) => _toggle(index),
|
||||
value: widget.selectedList[index])
|
||||
: const Icon(Icons.image),
|
||||
)),
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
class ListBuilder extends StatefulWidget {
|
||||
const ListBuilder({
|
||||
Key? key,
|
||||
required this.selectedList,
|
||||
required this.isSelectionMode,
|
||||
required this.onSelectionChange,
|
||||
}) : super(key: key);
|
||||
|
||||
final bool isSelectionMode;
|
||||
final List<bool> selectedList;
|
||||
final Function(bool)? onSelectionChange;
|
||||
|
||||
@override
|
||||
State<ListBuilder> createState() => _ListBuilderState();
|
||||
}
|
||||
|
||||
class _ListBuilderState extends State<ListBuilder> {
|
||||
void _toggle(int index) {
|
||||
if (widget.isSelectionMode) {
|
||||
setState(() {
|
||||
widget.selectedList[index] = !widget.selectedList[index];
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return ListView.builder(
|
||||
itemCount: widget.selectedList.length,
|
||||
itemBuilder: (_, int index) {
|
||||
return ListTile(
|
||||
onTap: () => _toggle(index),
|
||||
onLongPress: () {
|
||||
if (!widget.isSelectionMode) {
|
||||
setState(() {
|
||||
widget.selectedList[index] = true;
|
||||
});
|
||||
widget.onSelectionChange!(true);
|
||||
}
|
||||
},
|
||||
trailing: widget.isSelectionMode
|
||||
? Checkbox(
|
||||
value: widget.selectedList[index],
|
||||
onChanged: (bool? x) => _toggle(index),
|
||||
)
|
||||
: const SizedBox.shrink(),
|
||||
title: Text('item $index'));
|
||||
});
|
||||
}
|
||||
}
|
|
@ -0,0 +1,74 @@
|
|||
// Copyright 2014 The Flutter Authors. All rights reserved.
|
||||
// Use of this source code is governed by a BSD-style license that can be
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_api_samples/widgets/scroll_view/listview_select.1.dart'
|
||||
as example;
|
||||
import 'package:flutter_test/flutter_test.dart';
|
||||
|
||||
void main() {
|
||||
testWidgets('long press ListTile should enable edit mode',
|
||||
(WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.MyApp(),
|
||||
);
|
||||
|
||||
final Finder listView = find.byType(ListView);
|
||||
final Finder selectAllFinder = find.text('select all');
|
||||
final Finder checkBoxFinder = find.byType(Checkbox);
|
||||
expect(listView, findsWidgets);
|
||||
expect(selectAllFinder, findsNothing);
|
||||
expect(checkBoxFinder, findsNothing);
|
||||
await tester.longPress(listView.first);
|
||||
await tester.pump();
|
||||
expect(selectAllFinder, findsOneWidget);
|
||||
expect(checkBoxFinder, findsWidgets);
|
||||
});
|
||||
|
||||
testWidgets('Pressing cross button should disable edit mode',
|
||||
(WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.MyApp(),
|
||||
);
|
||||
|
||||
final Finder listView = find.byType(ListView);
|
||||
final Finder crossIconFinder = find.byIcon(Icons.close);
|
||||
expect(listView, findsWidgets);
|
||||
expect(crossIconFinder, findsNothing);
|
||||
|
||||
/// enable edit mode
|
||||
await tester.longPress(listView.first);
|
||||
await tester.pump();
|
||||
|
||||
expect(crossIconFinder, findsOneWidget);
|
||||
await tester.tap(crossIconFinder);
|
||||
await tester.pump();
|
||||
final Finder selectAllFinder = find.text('select all');
|
||||
expect(selectAllFinder, findsNothing);
|
||||
expect(crossIconFinder, findsNothing);
|
||||
});
|
||||
|
||||
testWidgets('tapping ListTile or checkBox should toggle ListTile state',
|
||||
(WidgetTester tester) async {
|
||||
await tester.pumpWidget(
|
||||
const example.MyApp(),
|
||||
);
|
||||
|
||||
final Finder listView = find.byType(ListView);
|
||||
final Finder selectAllFinder = find.text('select all');
|
||||
expect(listView, findsWidgets);
|
||||
|
||||
/// enable edit mode
|
||||
await tester.longPress(listView.first);
|
||||
await tester.pump();
|
||||
|
||||
final Finder checkBoxFinder = find.byType(Checkbox).first;
|
||||
expect(selectAllFinder, findsOneWidget);
|
||||
expect(checkBoxFinder, findsOneWidget);
|
||||
expect(tester.widget<Checkbox>(checkBoxFinder).value, false);
|
||||
await tester.tap(checkBoxFinder);
|
||||
await tester.pump();
|
||||
expect(tester.widget<Checkbox>(checkBoxFinder).value, true);
|
||||
});
|
||||
}
|
|
@ -1010,6 +1010,13 @@ abstract class BoxScrollView extends ScrollView {
|
|||
/// example of how a caller might wire up basic item selection, see
|
||||
/// [ListTile.selected].
|
||||
///
|
||||
/// {@tool dartpad}
|
||||
/// This example shows a custom implementation of [ListTile] selection in a [ListView] or [GridView].
|
||||
/// Long press any ListTile to enable selection mode.
|
||||
///
|
||||
/// ** See code in examples/api/lib/widgets/scroll_view/listview_select.1.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// See also:
|
||||
///
|
||||
/// * [SingleChildScrollView], which is a scrollable widget that has a single
|
||||
|
@ -1700,6 +1707,13 @@ class ListView extends BoxScrollView {
|
|||
/// ```
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// {@tool dartpad}
|
||||
/// This example shows a custom implementation of [ListTile] selection in a [GridView] or [ListView].
|
||||
/// Long press any ListTile to enable selection mode.
|
||||
///
|
||||
/// ** See code in examples/api/lib/widgets/scroll_view/listview_select.1.dart **
|
||||
/// {@end-tool}
|
||||
///
|
||||
/// See also:
|
||||
///
|
||||
/// * [SingleChildScrollView], which is a scrollable widget that has a single
|
||||
|
|
Loading…
Reference in a new issue