Flutter - 使用 onPressed 更改圖像（不在按鈕中）

Question

我是 StackOverflow 和 flutter 游戲的新手，並嘗試為 web 編寫應用程序。 也許這是一個簡單的問題，但我不知道該怎么做。 我有問題，我不知道如何更改已顯示的圖像。

我的目標是 3 個按鈕，可以更改它們上方的圖像。 可以顯示其中一張圖像或在開始時用占位符替換，這並不重要。

可能代碼中有一些不必要的function，忽略它們。

如果你能幫助我，那就太好了。

圖片

import 'package:flutter/material.dart';

void main() {
  runApp(StarCounter());
}

class StarCounter extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Screen',
      theme: ThemeData(
        primarySwatch: Colors.orange,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Screen'),
    );
  }
}

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

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  var _itemImage = Image.asset("Screenshot1.png");

  tmpFunction() {
    Container(
      child: _itemImage,
      width: 500,
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              child: Placeholder(
                fallbackWidth: 500,
              ),
            ),
            Text(
              'Wählen Sie den gewünschten Button aus:',
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                FlatButton(onPressed: tmpFunction, child: Text("Button 1")),
                FlatButton(onPressed: tmpFunction, child: Text("Button 2")),
                FlatButton(onPressed: tmpFunction, child: Text("Button 3")),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

每個按鈕都會改變圖像你可以改變用戶資產圖像或網絡圖像

import 'package:flutter/material.dart'; 
void main() {
runApp(StarCounter());
}

class StarCounter extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
  title: 'Screen',
  theme: ThemeData(
    primarySwatch: Colors.orange,
    visualDensity: VisualDensity.adaptivePlatformDensity,
  ),
  home: MyHomePage(title: 'Screen'),
  );
  }
  }

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

   final String title;

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

    class _MyHomePageState extends State<MyHomePage> {
       var _itemImage = [
        Image.network("https://i.picsum.photos/id/203/200/300.jpg? 
        hmac=mJaqsySlyEjr8fLBHytyVCUyqlfPSxqXePXEIhZZi_Y"),
        Image.network("https://i.picsum.photos/id/14/200/200.jpg?hmac=bwQwH7- 
        0RPCqUVkFzd3hFhc6yDfC6_e7vgaKXZ7vFOA"),
        Image.network("https://picsum.photos/id/870/200/300?grayscale&blur=2")];

        int index =0;


        tmpFunction() {
        Container(
        child: _itemImage[index],
        width: 500,
        );
        }

       @override
       Widget build(BuildContext context) {
       return Scaffold(
        appBar: AppBar(
        title: Text(widget.title),
       ),
       body: Center(
       child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
       
         Container(
         child: _itemImage[index],
         width: 500,
         ),
        Text(
          'Wählen Sie den gewünschten Button aus:',
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            FlatButton(onPressed: (){
              
             
             setState(() { index = 0;});
            }, child: Text("Button 1")),
            FlatButton(onPressed: (){
               setState(() { index = 1;});
              
            }, child: Text("Button 2")),
            FlatButton(onPressed: (){
               setState(() {  index = 2;});
               
              
            }, child: Text("Button 3")),
          ],
           ),
          ],
         ),
           ),
        );
        }
       }