用于选择行 and/or 元素的 Flutter longPress 事件功能

Question

我需要在 Android 和 iOS 的 Flutter 行元素上实现长按 selection。有什么帮助吗？

到目前为止我的代码：

class ListElement extends StatelessWidget {
  ListElement({this.text, this.name, this.mId, this.animationController});

  final String text;
  final String name;
  final String mId;
  final AnimationController animationController; 

  @override
  Widget build(BuildContext context) {
    return new GestureDetector(
      onTap: () {
         Navigator.of(context).push(
                  new MaterialPageRoute(builder: (BuildContext context) => new DrugProfile(drugmId))
                );
      }, 
      onLongPress: () {
       //HERE I NEED TO SELECT MULTIPLE ROWS IF IT FIRES
      }, 

      child: new SizeTransition(
        sizeFactor: new CurvedAnimation(
            parent: animationController, curve: Curves.easeOut),
        axisAlignment: 0.0,
        child: new Container(
          margin: const EdgeInsets.symmetric(vertical: 10.0),
          child: new Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              new Container(
                margin: const EdgeInsets.only(right: 16.0),
                child: new CircleAvatar(child: new Text(name[0].toUpperCase())),
              ),
              new Expanded(
                child: new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(name, style: Theme.of(context).textTheme.subhead),
                    new Container(
                      margin: const EdgeInsets.only(top: 5.0),
                      child: new Text(
                        text,
                        textAlign: TextAlign.left,
                        style: new TextStyle(
                        fontSize: 13.0,),
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        )
      )
    );
  }
}

也许我从 onLongPress 事件开始就错了，但我需要执行以下操作：如果在行元素上长按，则提供 select 多行的能力。在 selection 之后，然后对行执行自定义操作（这不是问题的一部分:)）在 selection 之后，我想象了一个索引数组，我可以将其传递给函数以进行进一步处理。我只需要有关多个 selection 元素的帮助。

Answer 1

您可以使用 HashMap 来跟踪列表中的选定项目并根据您喜欢的手势更新其值。

这是一个您可以尝试的示例。在此示例中，multi-select 模式将在长按某个项目时启动。 Multi-select 当没有剩余选定项目时，模式将停止。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var selectMode = false;

  Map<String, bool> listItemSelected = {
    'List 1': false,
    'List 2': false,
    'List 3': false,
    'List 4': false,
    'List 5': false,
    'List 6': false,
    'List 7': false,
    'List 8': false,
    'List 9': false,
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: ListView(
          children: listItemSelected.keys.map((key) {
            return Card(
              child: GestureDetector(
                onTap: () {
                  // if multi-select mode is true, tap should select List item
                  if (selectMode && listItemSelected.containsValue(true)) {
                    debugPrint('onTap on $key');
                    setState(() {
                      listItemSelected[key] = !listItemSelected[key];
                    });
                  } else {
                    // Stop multi-select mode when there's no more selected List item
                    debugPrint('selectMode STOP');
                    selectMode = false;
                  }
                },
                // Start List multi-select mode on long press
                onLongPress: () {
                  debugPrint('onLongPress on $key');
                  if (!selectMode) {
                    debugPrint('selectMode START');
                    selectMode = true;
                  }
                  setState(() {
                    listItemSelected[key] = !listItemSelected[key];
                  });
                },
                child: Container(
                  // Change List item color if selected
                  color: (listItemSelected[key])
                      ? Colors.lightBlueAccent
                      : Colors.white,
                  padding: EdgeInsets.all(16.0),
                  child: Text(key),
                ),
              ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

演示

用于选择行 and/or 元素的 Flutter longPress 事件功能

Flutter longPress event functionality for selection of row(s) and/or elements

android

row

long-press

flutter