Flutter：为 ImagePicker 使用 Listview.builder

Question

拜托，我是新来的颤振。 （我想使用 Listview.builder 简化第一个代码）我正在尝试为图像选择器实现 Listview.builder。我正在使用 youtube 教程。请，我如何将“文件”类映射到图像。我试过使用 ...Map... 但这不起作用。我已经发布了下面的代码。这是我要简化的内容：

import 'package:image_picker/image_picker.dart';
import 'dart:io';


class ImageGallery extends StatefulWidget {
  @override
  _ImageGalleryState createState() => _ImageGalleryState();
}

class _ImageGalleryState extends State<ImageGallery> {

  File _image1;
  File _image2;
  File _image3;
  File _image4;

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      height: MediaQuery.of(context).size.height / 5,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              width: MediaQuery.of(context).size.width / 8,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5),
                      bottomLeft: Radius.circular(5)),
                  boxShadow: [
                    BoxShadow(
                    offset: Offset(0, 15),
                    blurRadius: 27,
                    color: Colors.black12, // Black color with 12% opacity
                  )]),
              child: Center(child: Text('Images')),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              decoration: BoxDecoration(
                // color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10)),
                  boxShadow: [BoxShadow(
                    offset: Offset(0, 15),
                    blurRadius: 27,
                    color: Colors.black12, // Black color with 12% opacity
                  )]),
              child: Row(
                children: <Widget>[
                  OutlineButton(
                      onPressed: () {
                        _selectImage(
                            ImagePicker.pickImage(source:ImageSource.gallery ), 1
                        );
                      },
                      color: Colors.white,
                      borderSide: BorderSide(
                        color: Colors.orange.withOpacity(0.1),
                        width: 2.5,
                      ),
                      child: _displayChild1()
                  ),
                  OutlineButton(
                      onPressed: () {
                        _selectImage(
                            ImagePicker.pickImage(source:ImageSource.gallery ), 2
                        );
                      },
                      color: Colors.white,
                      borderSide: BorderSide(
                        color: Colors.orange.withOpacity(0.1),
                        width: 2.5,
                      ),
                      child: _displayChild2()
                  ),
                  OutlineButton(
                      onPressed: () {
                        _selectImage(
                            ImagePicker.pickImage(source:ImageSource.gallery ), 3
                        );
                      },
                      color: Colors.white,
                      borderSide: BorderSide(
                        color: Colors.orange.withOpacity(0.1),
                        width: 2.5,
                      ),
                      child: _displayChild3()
                  ),
                  OutlineButton(
                      onPressed: () {
                        _selectImage(
                            ImagePicker.pickImage(source:ImageSource.gallery ), 4
                        );
                      },
                      color: Colors.white,
                      borderSide: BorderSide(
                        color: Colors.orange.withOpacity(0.1),
                        width: 2.5,
                      ),
                      child: _displayChild4()
                  ),

                ],
              ),
            ),
          ),
        ],
      ),
    );

  }
  void _selectImage(Future<File> pickImage, int imageNumber) async {
    File tempImg = await pickImage;
    switch (imageNumber) {
      case 1:
        setState(() => _image1 = tempImg);
        break;
      case 2:
        setState(() => _image2 = tempImg);
        break;
      case 3:
        setState(() => _image3 = tempImg);
        break;
      case 4:
        setState(() => _image4 = tempImg);
        break;
    }
  }

  Widget _displayChild1() {
    if (_image1 == null) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
        child: Image.asset(
          "assets/icons/plus.png",
          height: 30,
          width: 30,
        ),
      );
    } else {
      return Image.file(
        _image1,
        fit: BoxFit.fill,
        width: double.infinity,
      );
    }
  }

  Widget _displayChild2() {
    if (_image2 == null) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
        child: Image.asset(
          "assets/icons/plus.png",
          height: 30,
          width: 30,
        ),
      );
    } else {
      return Image.file(
        _image2,
        fit: BoxFit.fill,
        width: double.infinity,
      );
    }
  }

  Widget _displayChild3() {
    if (_image3 == null) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
        child: Image.asset(
          "assets/icons/plus.png",
          height: 30,
          width: 30,
        ),
      );
    } else {
      return Image.file(
        _image3,
        fit: BoxFit.fill,
        width: double.infinity,
      );
    }
  }
  Widget _displayChild4() {
    if (_image4 == null) {
      return Padding(
        padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
        child: Image.asset(
          "assets/icons/plus.png",
          height: 30,
          width: 30,
        ),
      );
    } else {
      return Image.file(
        _image4,
        fit: BoxFit.fill,
        width: double.infinity,
      );
    }
  }
}

像这样使用 Listview.builder -

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';


class ImageAdd extends StatefulWidget {
  @override
  _ImageAddState createState() => _ImageAddState();
}

class _ImageAddState extends State<ImageAdd> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      height: MediaQuery.of(context).size.height / 5,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              width: MediaQuery.of(context).size.width / 8,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5),
                      bottomLeft: Radius.circular(5)),
                  boxShadow: [BoxShadow(
                    offset: Offset(0, 15),
                    blurRadius: 27,
                    color: Colors.black12, // Black color with 12% opacity
                  )]),
              child: Center(child: Text('Images')),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              decoration: BoxDecoration(
                // color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10)),
                  boxShadow: [BoxShadow(
                    offset: Offset(0, 15),
                    blurRadius: 27,
                    color: Colors.black12, // Black color with 12% opacity
                  )]),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 4,
                itemBuilder: (context, index) => OutlineButton(
                  onPressed: () {},
                  color: Colors.white,
                  borderSide: BorderSide(
                    color: Colors.orange.withOpacity(0.1),
                    width: 2.5,
                  ),
                  child: Padding(
                    padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
                    child: Image.asset(
                      "assets/icons/plus.png",
                      height: 30,
                      width: 30,
                    ),
                  ),
                ),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

我不知道如何使用 Listview.builder 来实现第一个代码或更确切地说是简化第一个代码。谢谢。

Answer 1

您可以在下面复制粘贴运行完整代码
您可以使用Map<int, File> 并将File 放入相关的index
代码sn-p

Map<int, File> files = {0: null, 1: null, 2: null, 3: null};

ListView.builder(
    scrollDirection: Axis.horizontal,
    itemCount: files.length,
    itemBuilder: (context, index) => OutlineButton(
        onPressed: () async {
          files[index] = await ImagePicker.pickImage(
              source: ImageSource.gallery);
          setState(() {});
        },
        ...
        child: files[index] == null
            ? Padding(
                ...
            : Image.file(
                files[index],
                fit: BoxFit.fill,

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';
import 'dart:io';

Map<int, File> files = {0: null, 1: null, 2: null, 3: null};

class ImageAdd extends StatefulWidget {
  @override
  _ImageAddState createState() => _ImageAddState();
}

class _ImageAddState extends State<ImageAdd> {
  @override
  Widget build(BuildContext context) {
    return Container(
      margin: EdgeInsets.all(10),
      height: MediaQuery.of(context).size.height / 5,
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Expanded(
            flex: 1,
            child: Container(
              width: MediaQuery.of(context).size.width / 8,
              decoration: BoxDecoration(
                  color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(5),
                      bottomLeft: Radius.circular(5)),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(0, 15),
                      blurRadius: 27,
                      color: Colors.black12, // Black color with 12% opacity
                    )
                  ]),
              child: Center(child: Text('Images')),
            ),
          ),
          Expanded(
            flex: 5,
            child: Container(
              decoration: BoxDecoration(
                  // color: Colors.white,
                  border: Border.all(color: Colors.orange),
                  borderRadius: BorderRadius.only(
                      topRight: Radius.circular(10),
                      bottomRight: Radius.circular(10)),
                  boxShadow: [
                    BoxShadow(
                      offset: Offset(0, 15),
                      blurRadius: 27,
                      color: Colors.black12, // Black color with 12% opacity
                    )
                  ]),
              child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: files.length,
                itemBuilder: (context, index) => OutlineButton(
                    onPressed: () async {
                      files[index] = await ImagePicker.pickImage(
                          source: ImageSource.gallery);
                      setState(() {});
                    },
                    color: Colors.white,
                    borderSide: BorderSide(
                      color: Colors.orange.withOpacity(0.1),
                      width: 2.5,
                    ),
                    child: files[index] == null
                        ? Padding(
                            padding: const EdgeInsets.fromLTRB(14, 40, 14, 40),
                            child: Image.network(
                              "https://picsum.photos/250?image=9",
                              height: 30,
                              width: 30,
                            ),
                          )
                        : Image.file(
                            files[index],
                            fit: BoxFit.fill,
                            //width: double.infinity,
                          )),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: ImageAdd(),
    );
  }
}