pub.dev 上的包 multiple_image_camera 有一些限制,因此我尝试创建自己的可以自定义的组件。我尝试将 imagesFromCameraRoll.add(img) 放置在 setState 的内部和外部。还尝试将 takePicture 内容放入 onPressed 事件中,但没有成功。
Future<void> openCamera(BuildContext context) async {
await startCamera(0); // rear
if (!mounted) return;
Navigator.of(context).push(
MaterialPageRoute(
builder: (context) => Scaffold(
appBar: AppBar(title: const Text('Fotos')),
body: Stack(
children: [
SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
child: FittedBox(
fit: BoxFit.cover,
child: SizedBox(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.width / cameraController.value.aspectRatio,
child: CameraPreview(cameraController),
),
),
),
imagesFromCameraRoll.isNotEmpty
? SafeArea(
child: Align(
alignment: Alignment.bottomLeft,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: Padding(
padding: const EdgeInsets.only(left: 8.0, right: 8.0, bottom: 150),
child: Container(
height: 100,
decoration: BoxDecoration(borderRadius: BorderRadius.circular(8.0)),
child: ListView.builder(
shrinkWrap: true,
scrollDirection: Axis.horizontal,
itemCount: imagesFromCameraRoll.length,
itemBuilder: (context, index) {
return ClipRRect(
borderRadius: BorderRadius.circular(15),
child: Image.file(
File(imagesFromCameraRoll[index].path),
height: 90,
fit: BoxFit.cover,
),
);
},
),
),
),
),
],
),
),
)
: Container(),
],
),
floatingActionButton: FloatingActionButton.large(
onPressed: () async {
takePicture();
},
child: const Icon(Icons.camera_alt),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
),
),
);
}
List<XFile> imagesFromCameraRoll = [];
void takePicture() async {
if (cameraController.value.isTakingPicture || !cameraController.value.isInitialized) {
return;
}
try {
final XFile img = await cameraController.takePicture();
setState(() {
imagesFromCameraRoll.add(img);
});
} catch (e) {
if (kDebugMode) {
print(e);
}
}
}
任何帮助将非常感激。谢谢