颤动按钮以在其上方显示图像

Question

大家好，希望你们一切顺利。 我想知道如何创建一个按钮，并在按下按钮时显示图像和列或行。

请帮我。

**现在，按下按钮时图像会出现并消失。 但它不会刷新以获得新的（它是一个动态 URL）

***现在按下按钮时图像会发生变化，但我不知道可以将按钮放在哪里。

更新代码5.0

import 'dart:typed_data';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'colors.dart';

const String url = 'http://thecatapi.com/api/images/get?format=src&type=gif';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        theme:
            ThemeData(primarySwatch: primaryBlack, accentColor: Colors.white),
        debugShowCheckedModeBanner: false,
        home: HomePage());
  }
}

class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  late Uint8List bytes;
  bool loading = true;

  @override
  void didChangeDependencies() async {
    getBytes();
    super.didChangeDependencies();
  }

  void getBytes() async {
    setState(() {
      loading = true;
    });

    Uint8List newbytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
        .buffer
        .asUint8List();

    setState(() {
      bytes = newbytes;
      loading = false;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              ':(:',
              style: TextStyle(fontWeight: FontWeight.bold),
            ),
            Text('FelizTriste'),
            Text(':(:', style: TextStyle(fontWeight: FontWeight.bold)),
          ],
        ),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            loading
                ? const SizedBox(
                    width: 355,
                    height: 355,
                    child: Center(child: CircularProgressIndicator()))
                : Container(
                    decoration: BoxDecoration(
                        border: Border.all(color: primaryBlack, width: 6)),
                    child: Image.memory(
                      bytes,
                      width: 350,
                      height: 350,
                      fit: BoxFit.cover,
                    ),
                  ),
            SizedBox(
              height: 60,
            ),
            ElevatedButton(onPressed: getBytes, child: const Text('GATIT@S')),
            const Text(
              '¿Quieres ver gatit@s?',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            )
          ],
        ),
      ),
    );
  }
}

我尝试添加一个容器，目的是减少或增加图像，使其完美适合，但没有成功。

另外，URL 是动态的，所以我想用每个按钮“刷新”图像显示希望你能帮助我。

打算学习一下这个方法： Flutter：刷新网络图像

Answer 1

我已经修改了您的代码：

1. 删除了图像函数，而是创建一个最初应为false的变量，布尔。

2. 按下按钮时，应更改为true。

    升高的丁顿（
      onpressed ：（）{
        setState（（）{
          showimage = true;
        }）;
      }，，
      孩子：文字（'gatit@s'）
   ），
    

3. 仅在showimage变量为真时才能显示图像和文本，否则显示空sizedbox（）。

     showimage
      ？柱子（
          孩子们： [
            image.network（'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'），），
            文字（'Hola'）
          ]，，
        ）
      ：sizedbox（
          身高：0，
        ），