我是flutter的初學者，我對Widget的概念不是很了解。
我想把背景圖片設定為unsplash的隨機圖片，但我想添加一個按鈕，當我點擊它時，可以再次請求一個隨機圖片，但我對Flutter的許多概念感到困惑，我不知道如何完成這個功能。
以下是我目前的代碼，我不知道如何改變它，請幫助我，非常感謝！
import 'package:flutter/material.dart'。
void main() => runApp(MyApp() );
class MyApp extends StatelessWidget{
Widget build(BuildContext context) {
//TODO:實作build。
return MaterialApp(
標題。'Welcome to Flutter'。
主題。new ThemeData(
亮度。Brightness.light,
),
家。new Scaffold(
appBar: new AppBar(
標題。new Text("Welcome to Flutter") 。
),
體。BackgroundImgDemo()
),
);
}
}
class BackgroundImgDemo extends StatelessWidget{
final String imgUrl="https://unsplash.it/1440/3040?random"/span>;
const BackgroundImgDemo({Key key}) : super(key: key);
Widget build(BuildContext context) {
return Container(
裝飾。BoxDecoration(
影像。new DecorationImage(
適合。BoxFit.cover,
影像。new NetworkImage(imgUrl),
),
),
孩子。容器(
margin: EdgeInsets.only(top: 500.0)。
孩子。中心(
孩子。RaisedButton(
color: Colors.white,
child: Text("clicke here!")。
onPressed: () {
},
)
),
),
);
}
}
uj5u.com熱心網友回復：
我也是一個非常初級的人，我嘗試著解決你的問題。 我的方法是
- 改變你的無狀態部件。
- 將你的無狀態widget改為有狀態widget 使用NetworkImage變數showImg來傳遞給圖片部件創建一個函式updateUI，它將重繪 要顯示的影像。
- 從onPressed函式中呼叫了updateUI 。
但這似乎并不奏效。按照這個主題，我想知道怎么做
。import 'package:flutter/material.dart'。
void main() => runApp(MyApp() );
class MyApp extends StatelessWidget{
@override
Widget build(BuildContext context) {
//TODO:實作build。
return MaterialApp(
標題。'Welcome to Flutter'。
主題。new ThemeData(
亮度。Brightness.light,
),
家。new Scaffold(
appBar: new AppBar(
標題。new Text("Welcome to Flutter") 。
),
body: BackgroundImgDemo()）。)
);
}
}
class BackgroundImgDemo extends StatefulWidget{
@override
State<BackgroundImgDemo> createState() => _BackgroundImgDemoState()。
}
class _BackgroundImgDemoState extends State< BackgroundImgDemo> {
final String imgUrl = "https://unsplash.it/1440/3040?random"/span>;
NetworkImage showImg = NetworkImage("https://unsplash.it/1440/3040?random");
void updateUI() {
setState(() {
showImg = NetworkImage(imgUrl);
});
}
@override
Widget build(BuildContext context) {
return Container(
裝飾。BoxDecoration(
影像。裝飾影像(
適合。BoxFit.cover,
image: showImg,
),
),
孩子。容器(
margin: EdgeInsets.only(top: 500.0)。
孩子。中心(
孩子。RaisedButton(
color: Colors.white,
child: const Text("click here!") 。
onPressed: () => updateUI(),
),
),
),
);
}
}
uj5u.com熱心網友回復：
首先，你需要使用StatefulWidget來對UI進行任何改變。但這里的第二個問題是，在第一次加載相同的URL后，影像從快取中加載。
只要你在背景關系中使用相同的URL，影像將從快取中加載。 關于upspash的URL，你可以通過在按下按鈕時在URL的末尾添加一些東西來調整一些值。
這里是小部件
。
class MyWidgetsBinding extends WidgetsFlutterBinding{
ImageCache createImageCache() => MyImageCache();
}
class _BackgroundImgDemoState extends State< BackgroundImgDemo> {
String imgUrl1 = "https://unsplash.it/1440/3040?random"/span>;
int count = 0;
Widget build(BuildContext context) {
return Container(
裝飾。BoxDecoration(
影像。new DecorationImage(
適合。BoxFit.cover,
影像。new NetworkImage(
"${imgUrl1}$count"/span>。
),
),
),
孩子。容器(
margin: EdgeInsets.only(top: 500.0)。
孩子。中心(
孩子。RaisedButton(
color: Colors.white,
child: Text("clicke here!")。
onPressed: () async {
print("clear cache") 。
setState(() {
count ;
});
},
)),
),
);
}
}
你也可以嘗試cached_network_image來維護快取。
轉載請註明出處，本文鏈接：https://www.uj5u.com/gongcheng/309229.html
標籤：
上一篇：在bootstrap5.0中缺少card-columns類？除了使用cssmediaqueries和flexcolumn外，bootstrap是否提供任何替代方案？