Flutter-在setState之前保存多个小部件转换

问题描述

我有一个包含多个MatrixGesture容器的堆栈，其中的图像可以拖动，缩放和旋转。我想将每个容器的状态保存在其位置和形状中，因为在使用setState稍作更改后，所有内容都会返回到原始位置。图像的所有信息都在具有特定对象类型的列表中。这是显示图像的代码片段：

class NewOutfitState extends State<NewOutfit> {
    List<displayGarment> garmentsList;
    
    @override
    Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
        title: new Text("New"),body:  new Container(
        child:MyList(myList: garmentsList,canvasSize: realCanvas,);
        )
    }
}
class MyListState extends State<MyList>{
    List<displayGarment> myList;
    double realCanvas;
    bool flag=false;
    int touch=0;
    @override
    void initState() {
        super.initState();
        myList=widget.myList;
        realCanvas = widget.canvasSize;
    }

    @override
    Widget build(BuildContext context) {
        return Stack(
        children: getList(),);
    }

    List<Widget> getList(){
        List<Widget> listWidget=[];
        
        for(int i=0;i<myList.length;i++) {
        final ValueNotifier<Matrix4> notifier1= ValueNotifier(Matrix4.identity());
        displayGarment _garments = myList[i];
        
        listWidget.add( 
            MatrixGestureDetector(
            key: Key(i.toString()),onMatrixUpdate: (m,tm,sm,rm) { 
            notifier1.value = m;
            },child: AnimatedBuilder(
            animation: notifier1,builder: (ctx,child) {
                return Transform(
                transform: notifier1.value,child: Stack(
                    children: <Widget>[
                    Container(          
                        padding: EdgeInsets.all(4),alignment: Alignment(0,-0.5),child: 
                            Container(   
                            padding: EdgeInsets.all(0),height: imgHeigh,width: imgWidth,child:
                                DottedBorder(
                                color: Colors.transparent,strokeWidth: 0,child: Center(
                                    child: CachednetworkImage(
                                    imageUrl: 
                                    'https://fashiers.com/garments_img/'+imgurl,)),);,)
                    )
                ],),);},)
        );
    }
    return listWidget;
}

}

是否还可以在点击图像时在图像周围设置边框，并在之前可能已点击的图像上去除边框？

我对此表示感谢。This is what inspector shows me

解决方法

对于第一部分，您不应将notifier1初始化放入构建函数中。因此，每次使用setStatus时，职位都会重置。这部分应在initState()中初始化，这意味着您应将所有服装位置值保留在此类中。（例如List<ValueNotifier>）

第二部分，索引garments可能是本能的解决方案。显示/隐藏边框：

child: _selectedIndex == i ?
  // Widget with border
  : //Widget without border

并在_selectedIndex内设置onMatrixUpdate()

dart matrix pinchzoom