【Flutter&Dart】 [ListView] or [GridView] 丝滑切换 例子七（19 /100）

上效果图

官网的demo例子，这个比较完整；基本上网格和列表数据加载框架用这一套就够用了；

上代码：

import 'package:flutter/material.dart';

class ListTileSelect extends StatelessWidget {
  const ListTileSelect({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ListTileSelectDemo(),
    );
  }
}

class ListTileSelectDemo extends StatefulWidget {
  const ListTileSelectDemo({super.key});

  @override
  createState() => ListTileSelectDemoState();
}

class ListTileSelectDemoState extends State<ListTileSelectDemo> {
  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: Text('ListTile selection'),
        leading: isSelectionMode
            ? IconButton(
                onPressed: () {
                  setState(() {
                    isSelectionMode = false;
                  });
                  initializeSelection();
                },
                icon: Icon(Icons.close))
            : SizedBox(),
        actions: [
          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(
      {super.key,
      required this.isSelectionMode,
      this.onSelectionChange,
      required this.selectedList});

  final bool isSelectionMode;
  final ValueChanged<bool>? onSelectionChange;
  final List<bool> selectedList;
  @override
  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:
            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(
      {super.key,
      required this.isSelectionMode,
      required this.selectedList,
      this.onSelectionChange});

  final bool isSelectionMode;
  final List<bool> selectedList;
  final ValueChanged<bool>? onSelectionChange;
  @override
  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'));
      },
    );
  }
}

这个列表和选中效果用在SmartApi左侧菜单栏里刚刚好！！！
======================END

开始扣UI布局细节了！！！！

不知不觉已经搞到19篇了，快接近目标的五分之一了，按以前的情况大概率干到50篇左右应该完事了。但我想加强一下，把GitHub里开源的比较好的工具项目多搞几个。
有兴趣的大佬可以推荐或者一起搞搞蛤！小工具开发一般也就一周或者两周，一个月的估计都算种大型项目了。