flutter 如何计算宽高，自适应

Flutter 中可以使用 MediaQuery 和 LayoutBuilder 来计算宽高，实现自适应。

MediaQuery 可以获取当前屏幕的尺寸和方向，可以通过 MediaQuery.of(context).size 来获取屏幕宽高，通过 MediaQuery.of(context).devicePixelRatio 来获取屏幕的像素密度，从而实现自适应。

LayoutBuilder 可以获取父容器的尺寸和子组件的尺寸，可以通过 LayoutBuilder 来动态计算子组件的宽高，从而实现自适应。

另外，Flutter 中还提供了一些自适应的 Widgets，如 FractionallySizedBox、AspectRatio 等，可以根据屏幕尺寸来自动调整宽高比例。

相关问题

flutter 列表自适应宽高

Flutter 中的列表可以使用 ListView 或者 GridView 来实现。关于自适应宽高的问题，可以通过设置列表项的宽高来实现。

例如，如果你想让列表项的高度自适应，可以使用 `Flexible` 或者 `Expanded` 来包裹列表项，具体代码如下：

ListView.builder(
  itemCount: list.length,
  itemBuilder: (BuildContext context, int index) {
    return Flexible(
      child: Container(
        // 列表项的样式
        padding: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          border: Border(bottom: BorderSide(color: Colors.grey[300])),
        ),
        child: Text(list[index]),
      ),
    );
  },
)

上面的例子中，使用了 `Flexible` 来包裹列表项，这样列表项的高度就会自适应。如果你想让列表项的宽度自适应，则可以将 `Flexible` 换成 `Expanded`。

另外，如果你想让整个列表自适应宽高，可以将 ListView 或者 GridView 放到一个 `Expanded` 或者 `Flexible` 中。例如：

Flexible(
  child: ListView.builder(
    // 列表的样式
    padding: EdgeInsets.all(10.0),
    itemCount: list.length,
    itemBuilder: (BuildContext context, int index) {
      return Container(
        // 列表项的样式
        padding: EdgeInsets.all(10.0),
        decoration: BoxDecoration(
          border: Border(bottom: BorderSide(color: Colors.grey[300])),
        ),
        child: Text(list[index]),
      );
    },
  ),
)

上面的例子中，将 ListView 放到了一个 `Flexible` 中，这样列表就会自适应宽高。

flutter自绘组件，实现图片展示在屏幕正中间，图片宽高自适应，图片可拖动，放大缩小，写出示例代码。

以下是一个Flutter自绘组件的示例代码，可以实现图片展示在屏幕正中间，图片宽高自适应，图片可拖动，放大缩小的功能：

import 'package:flutter/material.dart';
import 'package:flutter/gestures.dart';
import 'dart:math' as math;

class ImageEditor extends StatefulWidget {
  final ImageProvider imageProvider;

  ImageEditor({Key key, this.imageProvider}) : super(key: key);

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

class _ImageEditorState extends State<ImageEditor> {
  double _scale = 1.0;
  double _previousScale = 1.0;
  Offset _offset = Offset.zero;
  Offset _previousOffset = Offset.zero;
  Size _imageSize;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onScaleStart: _handleScaleStart,
      onScaleUpdate: _handleScaleUpdate,
      onScaleEnd: _handleScaleEnd,
      child: CustomPaint(
        painter: _ImagePainter(
          imageProvider: widget.imageProvider,
          scale: _scale,
          offset: _offset,
          imageSize: _imageSize,
        ),
        child: SizedBox.expand(),
      ),
    );
  }

  void _handleScaleStart(ScaleStartDetails details) {
    _previousScale = _scale;
    _previousOffset = _offset;
  }

  void _handleScaleUpdate(ScaleUpdateDetails details) {
    setState(() {
      _scale = _previousScale * details.scale;
      _offset = _previousOffset +
          (details.focalPoint - details.localFocalPoint) / _scale;
    });
  }

  void _handleScaleEnd(ScaleEndDetails details) {
    _previousScale = 1.0;
    _previousOffset = _offset;
  }

  @override
  void initState() {
    super.initState();
    Image image = Image(image: widget.imageProvider);
    image.image.resolve(ImageConfiguration()).addListener(
      ImageStreamListener((info, _) {
        setState(() {
          _imageSize = Size(
            info.image.width.toDouble(),
            info.image.height.toDouble(),
          );
        });
      }),
    );
  }
}

class _ImagePainter extends CustomPainter {
  final ImageProvider imageProvider;
  final double scale;
  final Offset offset;
  final Size imageSize;

  _ImagePainter({
    this.imageProvider,
    this.scale,
    this.offset,
    this.imageSize,
  });

  @override
  void paint(Canvas canvas, Size size) async {
    Paint paint = Paint();
    paint.isAntiAlias = true;
    paint.filterQuality = FilterQuality.high;

    Rect rect = Offset.zero & size;
    canvas.clipRect(rect);

    if (imageSize != null) {
      double width = imageSize.width * scale;
      double height = imageSize.height * scale;
      double x = offset.dx + (size.width - width) / 2;
      double y = offset.dy + (size.height - height) / 2;

      Rect imageRect = Rect.fromLTWH(x, y, width, height);
      ui.Image image = await imageProvider.resolve(
        ImageConfiguration(
          size: Size(imageRect.width, imageRect.height),
        ),
      );
      canvas.drawImage(image, imageRect.topLeft, paint);
    }
  }

  @override
  bool shouldRepaint(_ImagePainter oldDelegate) {
    return oldDelegate.scale != scale ||
        oldDelegate.offset != offset ||
        oldDelegate.imageSize != imageSize;
  }
}