Question

我有一个要转换为图像的可滚动窗口小部件，但是当我要转换图像时，它仅显示窗口小部件的一部分。

在我上传的代码示例中，按下浮动按钮时，它将图像保存在图库中。如您所见，它仅保存了小部件的一部分。关于如何保存整个小部件的任何建议？缩放是否无关紧要。

import 'dart:io';

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';

import 'dart:ui' as ui;

import 'package:image_save/image_save.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter prueba',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PruebaApp(),
    );
  }
}

class PruebaApp extends StatelessWidget {
  GlobalKey _globalKey = new GlobalKey();
  // Creamos la lista de nombres
  final List<String> nombres = [
    "Alberto",
    "Ricardo",
    "Francisco",
    "Gustavo",
    "Oscar",
    "Alejandro",
    "Nayla"
  ];

  PruebaApp({Key key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter prueba'),
      ),
      //Utilizando el Scrollview.builder
      body: buildListView(_globalKey),
      floatingActionButton: botonTips(),
    );
  }

  RepaintBoundary buildListView(GlobalKey key) {
    return RepaintBoundary(
      key: key,
      child: ListView.builder(
        // tamaño de la lista
        itemCount: nombres.length,
        // Constructor de widget para cada elemento de la lista
        itemBuilder: (BuildContext context, int indice) {
          return Card(
            //le damos un color de la lista de primarios
            color: Colors.primaries[indice],
            //agregamos un contenedor de 100 de alto
            child: Container(
                height: 100,
                //Centramos con el Widget <a href="https://zimbronapps.com/flutter/center/">Center</a>
                child: Center(
                  //Agregamos el nombre con un Widget Text
                    child: Text(
                      nombres[indice],
                      //le damos estilo a cada texto
                      style: TextStyle(fontSize: 20, color: Colors.white),
                    ))),
          );
        },
      ),
    );
  }
  FloatingActionButton botonTips() {
    return FloatingActionButton(
      onPressed: () {
        capturePng();
      },
      child: Icon(Icons.lightbulb_outline),
      backgroundColor: Colors.redAccent,
    );
  }
  Future<void> capturePng() async {

    //var repaint = RepaintBoundary.wrap(buildListView(context), 0);
    //var boundary = RenderRepaintBoundary(child:repaint.createRenderObject(context));


    RenderRepaintBoundary boundary =  _globalKey.currentContext.findRenderObject();
    ui.Image image = await boundary.toImage();
    ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
    Uint8List pngBytes = byteData.buffer.asUint8List();
    print(pngBytes);
    File.fromRawPath(pngBytes);

    //Uint8List pngBytes=  await createImageFromWidget(SizedBox(height: MediaQuery.of(context).size.height,child: table,));
    final Directory directory = await getApplicationDocumentsDirectory();
    final File file = File('${directory.path}/file.png');
    await file.writeAsBytes(pngBytes);
    Directory dir = Platform.isAndroid
        ? await getExternalStorageDirectory()
        : await getApplicationDocumentsDirectory();
    if (!await file.exists()) {
      await file.create(recursive: true);
      file.writeAsStringSync("test for share documents file");
    }
    bool success = await ImageSave.saveImage(pngBytes, "gif", albumName: "demo");
    //ShareExtend.share(file.path, "file");
  }
}

Answer 1

现在不可能。对于Flutter，仅绘制当前显示的屏幕，因此不绘制不可见的部分。如果要进行滚动捕获，则必须使用CustomPainter Class通过Canvas将其转换为Bitmap来创建文件。

URL链接：https://www.raywenderlich.com/7560981-drawing-custom-shapes-with-custompainter-in-flutter

URL链接：How to save a Flutter canvas as a bitmap image?

Answer 2

有一个简单的方法您需要将 SingleChildScrollView 包装到RepaintBoundary。只需用SingleChildScrollView包装您的Scrollable小部件（或他的父亲）

SingleChildScrollView(
  child: RepaintBoundary(
     key: _globalKey
     child: Column() 
   )
)

如何将可滚动小部件转换为图像？

2 个答案: