flutter 获取父组件大小并布局容器LayoutBuilder

本是古典何须时尚 2021-07-24 17:49 1348阅读 0赞

LayoutBuilder(
        builder: (context,constraints){
          	context为父级上下文
          	constraints.biggest.height;  获取组件在父组件所能设置的最大高度
          	contraints.maxWidth;  获取父组件宽度,高度同理
          	
            return 组件
         } 
      )

代码示例:

LayoutBuilder(
        builder: (context,constraints){ 
          final endHeight=constraints.biggest.height;
          
            return GestureDetector(
              onVerticalDragDown: (text){  //当点击时会获取点击坐标
                  print(endHeight);
                  print(constraints.maxHeight);
                  print(constraints.maxWidth);
              },
              onVerticalDragEnd: (text){ 
                print(text);
              },
              onVerticalDragCancel: (){ 
                print("取消");
              },
              child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                  Icon(Icons.search,size: 15,),
                GestureDetector(
                  child:Text('A') ,
                  onTap: (){ 
                    scroll.animateTo(312, duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                  },
                ),
                GestureDetector(
                  child:Text('B') ,
                  onTap: (){ 
                    scroll.animateTo(478, duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                  },
                ),
                GestureDetector(
                  child:Text('C') ,
                  onTap: (){ 
                    scroll.animateTo(575, duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                  },
                ),
                GestureDetector(
                  child:Text('D') ,
                  onTap: (){ 
                    scroll.animateTo(741, duration: Duration(milliseconds: 200), curve: Curves.easeIn);
                  },
                ),
                  Text('E'),
                  Text('F'),
                  Text('G'),
                  Text('H'),
                  Text('I'),
                  Text('J'),
                  Text('K'),
                  Text('L'),  
                  Text('M'),
                  Text('N'),
                  Text('O'),
                  Text('P'),
                  Text('Q'),
                  Text('R'),
                  Text('S'),
                  Text('T'),
                  Text('U'),
                  Text('V'),
                  Text('W'),
                  Text('X'),
                  Text("Y"),
                  Text("#")                                   
                ],
              ),
            );
        },
                    )