Question

我是StackOverflow和flutter游戏的新手，并尝试为网络编写应用程序。也许这是一个简单的问题，但我不知道该怎么做。我有一个问题，就是我不知道如何更改显示的图像。

我的目标是3个按钮，它们可以改变它们上方的图像。其中一个图像可以显示，也可以一开始用占位符代替，这并不重要。

也许代码中有一些不必要的功能，请忽略它们。

如果您能帮助我，那就太好了。

<TargetFramework>netcoreapp3.1</TargetFramework>

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")),
          ],
           ),
          ],
         ),
           ),
        );
        }
       }

颤振-使用onPressed更改图像（不在按钮中）

1 个答案: