时间戳

首页 > 解决方案 > Flutter/MySQL：如何将 URL 从 mysql 数据库传递到 PageView/ImageSlider Widget？

php - Flutter/MySQL：如何将 URL 从 mysql 数据库传递到 PageView/ImageSlider Widget？

问题描述

我想将动态数量的图像 url 从我的 mysql 数据库传递到 PageView Widget 作为简单的 ImageSlider。

问题：一些类型错误，例如“参数类型 'List(ImageList)' 不能分配给参数类型 String”。或者“类型列表（动态）不是类型列表（字符串）”等的子类型，如果我将选择传递给小部件。

问题：如何将数据库中的选择传递给 PageView Widget？我必须更改我的 sql 选择吗？

在我的带有静态列表的简短代码示例下方（什么工作正常）：

final _images = ["url1","url2",];

  @override
  Widget build(BuildContext context) {
    return AspectRatio(
      aspectRatio: 16 / 9,
      child: PageView(
        physics: BouncingScrollPhysics(),
        controller: _pageController,
        children: _images.map((item) => Image.network(item,)).toList(),
      ),
    );
  }

到目前为止我尝试了什么：

  1. 从数据库中选择 json 或字符串 (GROUP_CONCAT(image)) --> 不成功

  2. 为 php-download 更改 Future 中的数据类型 --> 没有成功

  3. 试图作为 String 或 List(String) 传递给地图 --> 没有成功

如果有人有想法会很棒。如果需要更多代码/答案，请发表评论。非常感谢你。

标签： phpmysqlflutterdartflutter-pageview

解决方案

//this is the first part from link in the comment above
List<Payload> payloadFromJson(String str) => List<Payload>.from(json.decode(str).map((x) => Payload.fromJson(x)));

String payloadToJson(List<Payload> data) => json.encode(List<dynamic>.from(data.map((x) => x.toJson())));

class Payload {
  String sponsorlogo;

  Payload({
    this.sponsorlogo,
  });

  factory Payload.fromJson(Map<String, dynamic> json) => Payload(
    sponsorlogo: json["image"] == null ? null : json["image"],
  );

  Map<String, dynamic> toJson() => {
    "image": sponsorlogo == null ? null : sponsorlogo,
  };
}

//now the second part looks like these
Future<List<Payload>> dlimagelist(String idaddress) async {
  var map = Map<String, dynamic>();
  map['idaddress'] = idaddress;
  final response = await post("<url>.php", body: map);
  var payloadList = payloadFromJson(response.body);
  return payloadList;
}


//the third part is my future builder where i select with the cutomer id 'idaddress' or widget.id
      body: FutureBuilder(
        future: Future.wait(
            [download1('${widget.id}'), download2('${widget.id}'), dlimagelist('${widget.id}')]),
        builder: (context, snapshot) {
            List<Payload> imagelist = snapshot.data[2];
            return Scrollbar(
              controller: _controller,
              child: ListView(
                children: [
                  if (imagelist.isNotEmpty) SliderWidget(imagelist) else StandardImage(snapshot.data[0]),
                  //some other widgets
                ],
              ),
            );
        },
      ),

//the last part is my Widget
class SliderWidget extends StatefulWidget {
  final List<Payload> list;
  SliderWidget(this.list);

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

class _SliderWidgetState extends State<SliderWidget> {
  PageController _pageController = PageController(initialPage: 1);
  int _currentIndex = 1;

  @override
  Widget build(BuildContext context) {
    final _images = widget.list;

    List addedImages = [];
    if (_images.length > 0) {
      addedImages
        ..add(_images[_images.length - 1])
        ..addAll(_images)
        ..add(_images[0]);
    }

    return AspectRatio(
      aspectRatio: 16 / 8,
      child: Stack(
        children: [
          PageView(
            physics: BouncingScrollPhysics(),
            controller: _pageController,
            onPageChanged: (page) {
              int newIndex;
              if (page == addedImages.length - 1) {
                newIndex = 1;
                _pageController.jumpToPage(newIndex);
              } else if (page == 0) {
                newIndex = addedImages.length - 2;
                _pageController.jumpToPage(newIndex);
              } else {
                newIndex = page;
              }
              setState(() {
                _currentIndex = newIndex;
              });
            },
            children: addedImages
                .map((item) => Container(
                      margin: EdgeInsets.fromLTRB(10, 10, 10, 0),
                      child: ClipRRect(
                        borderRadius: BorderRadius.circular(10),
                        child: Image.network(
                          item.sponsorlogo,
                          fit: BoxFit.contain,
                        ),
                      ),
                    ))
                .toList(),
          ),
          Positioned(
            bottom: 5,
            left: 0,
            right: 0,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: _images
                  .asMap()
                  .map((i, v) => MapEntry(
                      i,
                      Container(
                        width: 6,
                        height: 6,
                        margin: EdgeInsets.only(left: 2, right: 2),
                        decoration: ShapeDecoration(
                          color: _currentIndex == i + 1 ? Colors.red : Colors.white,
                          shape: CircleBorder(),
                        ),
                      )))
                  .values
                  .toList(),
            ),
          )
        ],
      ),
    );
  }
}

推荐阅读