顫動按鈕以在其上方顯示影像

大家好，希望你們一切都好。我想知道如何創建一個按鈕以及當它被按下時顯示一個影像和一列或一行。

請幫我。

**現在，當按鈕按下時，影像會出現并消失。但它不會重繪 以獲得新的（它是一個動態網址）

***現在按下時影像會發生變化，但我不知道我可以把按鈕放在哪里。

更新代碼 4.0

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var title = 'Web Images';
    return MaterialApp(
        theme: ThemeData(
          primarySwatch: primaryBlack,
          accentColor: Colors.white,
        ),
        debugShowCheckedModeBanner: false,
        home: Scaffold(
          appBar: AppBar(
            title: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(
                  ':(:',
                  style: TextStyle(fontWeight: FontWeight.bold),
                ),
                Text('FelizTriste'),
                Text(':(:', style: TextStyle(fontWeight: FontWeight.bold)),
              ],
            ),
          ),
          body: ForcePicRefresh(),
        ));
  }
}

class ForcePicRefresh extends StatefulWidget {
  @override
  _ForcePicRefreshState createState() => _ForcePicRefreshState();
}

class _ForcePicRefreshState extends State<ForcePicRefresh> {
  String url = 'http://thecatapi.com/api/images/get?format=src&type=gif';
  Widget _pic;

  @override
  void initState() {
    _pic = Center(
      child: Container(
          height: 350,
          width: 350,
          decoration:
              BoxDecoration(border: Border.all(color: Colors.black, width: 6)),
          child: Image.network(
            url,
            width: double.infinity,
            fit: BoxFit.fill,
          )),
    );

    super.initState();
  }

  _updateImgWidget() async {
    setState(() {
      _pic = Center(child: CircularProgressIndicator());
    });
    Uint8List bytes = (await NetworkAssetBundle(Uri.parse(url)).load(url))
        .buffer
        .asUint8List();
    setState(() {
      _pic = Center(
          child: Container(
              height: 350,
              width: 350,
              decoration: BoxDecoration(
                  border: Border.all(color: Colors.black, width: 6)),
              child: Image.memory(
                bytes,
                width: double.infinity,
                fit: BoxFit.fill,
              )));
      SizedBox(height: 200);
      ElevatedButton(onPressed: () {}, child: Text('Hola'));
    });
    SizedBox(height: 200);
    ElevatedButton(onPressed: () {}, child: Text('Hola'));
  }

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: _pic,
      onTap: () {
        _updateImgWidget();
      },
    );
  }
}

我嘗試添加一個容器，目的是減少或增加影像，使其完美貼合，但我沒有作業。

此外，網址是動態的，所以我想用每個按鈕“重繪 ”影像顯示希望你能幫助我。

準備學習這個方法： Flutter：重繪 網路圖片

uj5u.com熱心網友回復：

我修改了你的代碼：

1. 洗掉了影像功能，而是創建一個變數 bool showImage 最初應該為假。

2. 按下按鈕時，showImage 應更改為 true。

    ElevatedButton(
      onPressed: () {
        setState(() {
          showImage = true;
        });
      },
      child: Text('GATIT@S')
   ),
   

3. 僅當 showImage 變數為 true 時才應顯示影像和文本，否則顯示空 SizedBox()。

    showImage
      ? Column(
          children: [
            Image.network(           'https://docs.flutter.dev/assets/images/dash/dash-fainting.gif'),
            Text('Hola')
          ],
        )
      : SizedBox(
          height: 0,
        ),
   

標籤：安卓 扑 图片 颤振机器人 颤动图像

上一篇：PySimpleGUI不能顯示.jpg，只能顯示.png。如何在不接觸原始檔案的情況下臨時將.jpg轉換為.png？

下一篇：如何通過java（不是jframe）將兩個影像放在一個畫布中