Flutter-按下时图像发生变化(不在按钮中)



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

我的目标是3个按钮,可以更改它们上面的图像。其中一个图像可以显示,或者在开始时用占位符替换,这并不重要。

也许在代码中有一些不必要的函数,忽略它们。

如果你能帮我的话,那就太好了。

图像

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

每个按钮都会更改图像您可以更改用户资产图像或网络图像

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

相关内容

  • 没有找到相关文章

最新更新