Flutter - что нужно для перезагрузки сетевого изображения, когда URL не меняется - PullRequest
0 голосов
/ 05 августа 2020

Я только начинаю изучать разработку приложений с Flutter.

Я пытаюсь создать приложение в учебных целях, которое захватывает изображение с веб-сайта, используя их API, для получения случайного изображения. Приложение отображает изображение и имеет кнопку, которая должна захватывать новое случайное изображение при нажатии.

Проблема в том, что URL-адрес для API не меняется, поэтому Flutter считает, что изображение такое же и не загружает новое изображение. По крайней мере, я так думаю.

Код очень простой c. Пока просто показываю изображение и кнопку. Я пробовал разные вещи и думал, что imageCache.clear(); должен работать, когда кнопка нажата, но, похоже, ничего не работает. Я также пробовал различные трюки со сбросом состояния и попытками перейти на ту же страницу с именованными маршрутами, но все они по-прежнему показывают одно и то же изображение (поэтому я думаю, что это может быть проблема кеширования). : shrug:

Все это выполняется из одного файла main.dart.

import 'package:flutter/material.dart';
import 'package:transparent_image/transparent_image.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.lightGreen[50],
        appBar: AppBar(
          title: Text("Show Me The Lettuce",
              style: TextStyle(color: Colors.white70)),
          backgroundColor: Colors.green[900],
        ),
        body: ShowLettuce(),
      ),
    ),
  );
}

class ShowLettuce extends StatefulWidget {
  @override
  _ShowLettuceState createState() => _ShowLettuceState();
}

class _ShowLettuceState extends State<ShowLettuce> {
  String url = 'https://source.unsplash.com/900x900/?lettuce';

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Stack(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(80.0),
                child: Center(child: CircularProgressIndicator()),
              ),
              Padding(
                padding: const EdgeInsets.all(8.0),
                child: FadeInImage.memoryNetwork(
                    placeholder: kTransparentImage, image: url),
              ),
            ],
          ),
          SizedBox(
            height: 20.0,
          ),
          RaisedButton(
            onPressed: () {
              imageCache.clear();
              print('button pressed.');
            },
            child: Text('Show Me A New Lettuce!'),
          ),
        ],
      ),
    );
  }
}

Я прочитал много документации по Flutter, но я еще не на точка, где я могу интерпретировать большую часть того, что они говорят, в пригодный для использования код (не знаю, где и как я должен вставить это в свой код, например, документация imageCache: https://api.flutter.dev/flutter/painting/ImageCache-class.html). Кажется, это должно быть действительно простое решение, но оно ускользает от меня.

Любая помощь приветствуется.

1 Ответ

0 голосов
/ 05 августа 2020

Я решил вашу проблему.

Вы должны добавить в свой код пару строк кода:

как первый - импорт:

import 'dart:math';

следующий - в классе _ShowLettuceState после объявленной переменной url:

var random = new Random();

и для fini sh - после нажатия кнопки, а именно в onPressed:

setState(() {   
                url = 'https://source.unsplash.com/900x900/?lettuce' + random.nextInt(100).toString();
            });
...