Flutter让用户在轮播中添加图像

编程问答 2022-08-14

问题描述

有什么方法可以让用户在图像轮播中手动添加图像？

这是我已经显示给用户的图像列表：

final List<String> imgList = [
  'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg','https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg','https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg'
];

final List<Widget> imageSliders = imgList
    .map(
      (item) => Container(
        child: Container(
          margin: EdgeInsets.all(5.0),child: ClipRRect(
              borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Stack(
                children: <Widget>[
                  Image.network(item,fit: BoxFit.cover,width: 1000.0),Positioned(
                    bottom: 0.0,left: 0.0,right: 0.0,child: Container(
                      decoration: Boxdecoration(
                        gradient: LinearGradient(
                          colors: [
                            Color.fromARGB(200,0),Color.fromARGB(0,0)
                          ],begin: Alignment.bottomCenter,end: Alignment.topCenter,),padding: EdgeInsets.symmetric(
                          vertical: 10.0,horizontal: 20.0),],)),)
    .toList();

       CarouselSlider(
             options: CarouselOptions(
                 autoplay: false,aspectRatio: 2.0,enlargeCenterPage: true,enlargeStrategy: CenterPageEnlargeStrategy.height,pauseAutoplayOnManualNavigate: true,pauseAutoplayOnTouch: true,scrollDirection: Axis.horizontal),items: imageSliders,

我使用CarouselSlider小部件不好吗？我没有发现任何方法可以让用户将手机中的图像直接添加到我创建的图像轮播中。

解决方法

您可以在下面复制粘贴运行完整代码
步骤1：您可以使用类别ImageConfig对图片来源进行分类
步骤2：在显示

时检查图像源类型 
item.source == "http"
          ? Image.network(item.path,fit: BoxFit.cover,width: 1000.0)
          : Image.file(File(item.path),width: 1000.0),

代码段

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source,this.path});
}

class _MyHomePageState extends State<MyHomePage> {
  List<ImageConfig> imgList = [
    ImageConfig(
        source: "http",path:
            'https://cdn.pixabay.com/photo/2016/04/15/08/04/strawberries-1330459_960_720.jpg'),...          
   Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      imgList.add(ImageConfig(source: "file",path: pickedFile.path));
    });
  }

工作演示

enter image description here

完整代码

import 'dart:io';

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

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: MyHomePage(title: 'Flutter Demo Home Page'),);
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key,this.title}) : super(key: key);

  final String title;

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

class ImageConfig {
  String source;
  String path;

  ImageConfig({this.source,ImageConfig(
        source: "http",path:
            'https://cdn.pixabay.com/photo/2019/12/01/16/56/cookies-4665910_960_720.jpg'),path:
            'https://cdn.pixabay.com/photo/2017/05/23/22/36/vegetables-2338824_960_720.jpg')
  ];
  List<Widget> imageSliders;

  final picker = ImagePicker();

  Future getImage() async {
    final pickedFile = await picker.getImage(source: ImageSource.gallery);

    setState(() {
      imgList.add(ImageConfig(source: "file",path: pickedFile.path));
    });
  }

  @override
  Widget build(BuildContext context) {
    imageSliders = imgList
        .map(
          (item) => Container(
            child: Container(
              margin: EdgeInsets.all(5.0),child: ClipRRect(
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),child: Stack(
                    children: <Widget>[
                      item.source == "http"
                          ? Image.network(item.path,width: 1000.0)
                          : Image.file(File(item.path),Positioned(
                        bottom: 0.0,left: 0.0,right: 0.0,child: Container(
                          decoration: BoxDecoration(
                            gradient: LinearGradient(
                              colors: [
                                Color.fromARGB(200,0),Color.fromARGB(0,0)
                              ],begin: Alignment.bottomCenter,end: Alignment.topCenter,padding: EdgeInsets.symmetric(
                              vertical: 10.0,horizontal: 20.0),],)),)
        .toList();

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,children: <Widget>[
            CarouselSlider(
              options: CarouselOptions(
                  autoPlay: false,aspectRatio: 2.0,enlargeCenterPage: true,enlargeStrategy: CenterPageEnlargeStrategy.height,pauseAutoPlayOnManualNavigate: true,pauseAutoPlayOnTouch: true,scrollDirection: Axis.horizontal),items: imageSliders,)
          ],floatingActionButton: FloatingActionButton(
        onPressed: getImage,tooltip: 'Increment',child: Icon(Icons.add),);
  }
}
carouseldartimageimageimagewidget