dart – 如何使用颤动在按钮网格中滑动拖动2个或更多按钮

概述我使用颤动制作了一个按钮网格,但现在我想在一个拖动中滑过2个或更多按钮,这样我所拖动的所有按钮都会被选中. 我已经检查了一些相同的问题,我被重定向到使用手势检测器,但这还不够.我需要某些属性或更好的示例代码,以便我能够完成它. 可拖动应用程序的一个示例是http://a5.mzstatic.com/us/r30/Purple60/v4/6f/00/35/6f0035d3-1bab-fcbb-cb1 我使用颤动制作了一个按钮网格,但现在我想在一个拖动中滑过2个或更多按钮,这样我所拖动的所有按钮都会被选中.

我已经检查了一些相同的问题,我被重定向到使用手势检测器,但这还不够.我需要某些属性或更好的示例代码,以便我能够完成它.

可拖动应用程序的一个示例是http://a5.mzstatic.com/us/r30/Purple60/v4/6f/00/35/6f0035d3-1bab-fcbb-cb13-8ab46cf3c44d/screen696x696.jpeg

解决方法 您可以手动命中测试RenderBox并提取您选择的特定RenderObject.

例如,我们可以在按钮上方添加以下renderobject：

class Foo extends SingleChildRenderObjectWidget {  final int index;  Foo({Widget child,this.index,Key key}) : super(child: child,key: key);  @overrIDe  RenderObject createRenderObject(BuildContext context) {    return _Foo()..index = index;  }  @overrIDe  voID updateRenderObject(BuildContext context,_Foo renderObject) {    renderObject..index = index;  }}class _Foo extends RenderProxyBox {  int index;}

然后使用Listener提取指针下找到的所有_Foo.

这是使用此原则的完整应用程序：

import 'package:Flutter/gestures.dart';import 'package:Flutter/material.dart';import 'package:Flutter/rendering.dart';voID main() {  runApp(MyApp());}class MyApp extends StatelessWidget {  @overrIDe  Widget build(BuildContext context) {    return MaterialApp(      Title: 'Flutter Demo',theme: themeData(primarySwatch: colors.blue),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> {  @overrIDe  Widget build(BuildContext context) {    return Scaffold(      appbar: Appbar(        Title: Text(Widget.Title),),body: GrID(),);  }}class GrID extends StatefulWidget {  @overrIDe  GrIDState createState() {    return new GrIDState();  }}class GrIDState extends State<GrID> {  final Set<int> selectedindexes = Set<int>();  final key = GlobalKey();  final Set<_Foo> _trackTaped = Set<_Foo>();  _detectTapedItem(PointerEvent event) {    final RenderBox Box = key.currentContext.findRenderObject();    final result = HitTestResult();    Offset local = Box.globalTolocal(event.position);    if (Box.hitTest(result,position: local)) {      for (final hit in result.path) {        /// temporary variable so that the [is] allows access of [index]        final target = hit.target;        if (target is _Foo && !_trackTaped.contains(target)) {          _trackTaped.add(target);          _selectIndex(target.index);        }      }    }  }  _selectIndex(int index) {    setState(() {      selectedindexes.add(index);    });  }  @overrIDe  Widget build(BuildContext context) {    return Listener(      onPointerDown: _detectTapedItem,onPointerMove: _detectTapedItem,onPointerUp: _clearSelection,child: GrIDVIEw.builder(        key: key,itemCount: 6,physics: NeverScrollableScrollPhysics(),grIDDelegate: SliverGrIDDelegateWithFixedCrossAxisCount(          crossAxisCount: 3,childAspectRatio: 1.0,crossAxisspacing: 5.0,mainAxisspacing: 5.0,itemBuilder: (context,index) {          return Foo(            index: index,child: Container(              color: selectedindexes.contains(index) ? colors.red : colors.blue,);        },);  }  voID _clearSelection(PointerUpEvent event) {    _trackTaped.clear();    setState(() {      selectedindexes.clear();    });  }}class Foo extends SingleChildRenderObjectWidget {  final int index;  Foo({Widget child,key: key);  @overrIDe  _Foo createRenderObject(BuildContext context) {    return _Foo()..index = index;  }  @overrIDe  voID updateRenderObject(BuildContext context,_Foo renderObject) {    renderObject..index = index;  }}class _Foo extends RenderProxyBox {  int index;}

总结

以上是内存溢出为你收集整理的dart – 如何使用颤动在按钮网格中滑动/拖动2个或更多按钮全部内容，希望文章能够帮你解决dart – 如何使用颤动在按钮网格中滑动/拖动2个或更多按钮所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。