Блог

На монтажной панели есть 10 коробок, и экран достаточно большой, чтобы вы могли видеть все 10 коробок. С другой стороны, если размер экрана невелик, все 10 коробок не отображаются на экране.

Я попытался передвинуть 10 штук так, чтобы я мог видеть ниже, некоторые коробки были отрезаны, поэтому они не выходили

Я хочу видеть все 10 полей, даже если экран маленький. Как мне решить эту проблему?

 class ArtBoard extends StatefulWidget {
  const ArtBoard({Key? key}) : super(key: key);

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

class _ArtBoardState extends State<ArtBoard> {
  TransformationController _transformController = TransformationController();
  double _scale = 1;
  Offset startOffset = Offset.zero;

  @override
  void initState() {
    super.initState();          
  }

  @override
  void dispose() {
    _transformController.dispose();
    super.dispose();
  }

 
  void _handleViewerTransformed() =>
      _scale = _transformController.value.row0[0];

  @override
  Widget build(BuildContext context) {
    RandomColor _randomColor = RandomColor();
    return Scaffold(
      resizeToAvoidBottomInset: false,
      backgroundColor: Colors.transparent,
      body: Stack(
        fit: StackFit.expand,
        children: [
       
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height,
            color: Colors.grey.shade500, 
            child: Center(
                child: Text('Design Board',
                    style: TextStyle(fontSize: 8, color: Colors.white70))),
          ),
          
          InteractiveViewer(
            transformationController: _transformController,
            boundaryMargin: EdgeInsets.all(double.infinity),
            constrained: true,
            minScale: 0.1,
            maxScale: 5.0,
            panEnabled: true,
            scaleEnabled: true,
            onInteractionUpdate: (ScaleUpdateDetails details) {
              //_transformationController.value.scale(1);
              //_transformationController.value.scale(details.scale);
              //print('Scale update:$details');
            },
            onInteractionEnd: (ScaleEndDetails details) {
              double correctScaleValue =
                  _transformController.value.getMaxScaleOnAxis();
              // unzoom when interaction has ended
              setState(() {
                print('${_transformController.value}');
                _transformController.toScene(Offset.zero);
              });
            },
            child: ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: 10,
              itemBuilder: (BuildContext context, int index) {
                return Align(
                  alignment: Alignment.center,
                  child: Container(
                      alignment: Alignment.center,
                      width: 100,
                      height: 80,
                      color: _randomColor.randomColor(),
                      child: Text('Box :${index}')),
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}
 

Это проблема, из-за которой известен флаттер, потому что, как и в машинном коде, он не обрабатывает размер для вас, я рекомендую использовать пакет, такой как sizer от https://pub.dev

 SizedBox(
  width: 100.sp.clamp(10,100)
)
 

В этом примере «.sp» — это расширение числа (int и double) из пакета sizer, которое дает вам размер относительно размера экрана, а затем добавление «.clamp» позволяет вам иметь размер в пределах желаемого размера.

 10.sp.clamp(lowestPoint, maxPoint);
 

ваш это, чтобы получить самую длинную сторону

 
final double longerSide = 100.w>100.h ? 100.w:100.h;
final double shorterSide = 100.w>100.h ? 100.h:100.w;

/// This builds a box using the lonerSide length and the shortSide length
Widget buildBox({required double lSide, required double sSide}) {
final averageHeight = longerSide / 10;
final averageWidth = shorterSide / 2;
  return Container(width: averageWidth, height: averageHeight, color: Colors.red);
}