问题描述
我只写了一个小部件,可以在其上显示图片和文本。我想更改小部件,使其成为我发送所需文本和图像的模板,并显示它,但现在整个应用程序中有一个相同的图像。我如何才能将图像作为输入发送到 buildImageCard();
带有小部件的主页:
import 'package:project_alpha/widgets/ImageCard.dart';
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return ListView(
// gridDelegate:
// SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),padding: EdgeInsets.all(16),children: [
buildImageCard(),buildImageCard(),],);
}
}
小工具:
Widget buildImageCard() => Card(
clipBehavior: Clip.antiAlias,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),),child: Column(
children: [
Stack(
children: [
Ink.image(
image: Assetimage('assets/images/screen.png'),height: 240,fit: BoxFit.cover,Positioned(
bottom: 30,right: 16,left: 16,child: Text(
'Interesting fact!',style: TextStyle(
fontWeight: FontWeight.bold,color: Colors.white,fontSize: 24,);
解决方法
如果您使用 AssetImage
,您只需要图像的路径。您可以将该路径作为 String
传递给构建器函数,就像任何其他参数一样。
Widget buildImageCard(String imagePath) => Card(
clipBehavior: Clip.antiAlias,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),),child: Column(
children: [
Stack(
children: [
Ink.image(
image: AssetImage(imagePath),height: 240,fit: BoxFit.cover,Positioned(
bottom: 30,right: 16,left: 16,child: Text(
'Interesting fact!',style: TextStyle(
fontWeight: FontWeight.bold,color: Colors.white,fontSize: 24,],);
class _HomeScreenState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return ListView(
// gridDelegate:
// SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),padding: EdgeInsets.all(16),children: [
buildImageCard('assets/images/screen.png'),buildImageCard('assets/images/screen2.png'),buildImageCard('assets/images/screen3.png'),buildImageCard('assets/images/screen4.png'),buildImageCard('assets/images/screen5.png'),buildImageCard('assets/images/screen6.png'),);
}
}
,
我强烈建议您避免创建返回 Widget 的方法,而是考虑创建一个扩展 Stateless 或 Stateful 的整个小部件,这样效率更高。
要解决您的问题,这是解决方案之一
import 'package:flutter/material.dart';
class ImageCard extends StatelessWidget {
final String fact;
final AssetImage image;
const ImageCard(this.fact,this.image);
@override
Widget build(BuildContext context) {
return Card(
clipBehavior: Clip.antiAlias,child: Column(
children: [
Stack(
children: [
Ink.image(
image: image,child: Text(
fact,);
}
}
你可以通过调用下面的方法来实例化这个widget
ImageCard("Your fact",AssetImage("assets/images/image.png"))
,
试试这个,
Widget buildImageCard({String title,String imageAssetName,}) => Card( // CHANGED HERE
clipBehavior: Clip.antiAlias,shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(24),child: Column(
children: [
Stack(
children: [
Ink.image(
image: AssetImage('assets/images/$imageAssetName.png'),// CHANGED HERE
height: 240,Positioned(
bottom: 30,child: Text(
title,// CHANGED HERE
style: TextStyle(
fontWeight: FontWeight.bold,);
使用此概念传递任何其他配置。