Flutter如何为主页上的每个图像添加特定的文本?

amrnrhlw  于 2022-11-17  发布在  Flutter
关注(0)|答案(2)|浏览(127)

我试图从我的图像文件夹中按索引运行图像,但我不知道如何实现特定于每个图像的文本,请参见此处

但我现在不确定如何通过索引为每个图像添加特定的文本

child: Container(
                          width: 160,
                          padding: EdgeInsets.only(left: 15),
                          margin: EdgeInsets.only(left: 15),
                          decoration: BoxDecoration(
                            color: Colors.black,
                            borderRadius: BorderRadius.circular(15),
                            image: DecorationImage(
                              image: AssetImage("img/city${index + 1}.jpg"),
                              fit: BoxFit.cover,
                              opacity: 0.7,
                            ),
                          ),
                        
                      Padding(
                        padding: EdgeInsets.only(top: 10),
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          children: \[
                            Text(
                              "City name",
                              style: TextStyle(
                                  fontSize: 20,
                                  fontWeight: FontWeight.w600),
                            ),
3z6pesqy

3z6pesqy1#

我已经为这样视图做了演示,
也许能帮你...
这里有一个密码

List<Map<String,dynamic>> maplist=[
  {
    'country':'America',
    'imageurl':'lib/images/usa.jpg',
  },
  {
    'country':'India',
    'imageurl':'lib/images/india.jpg',
  },
  {
    'country':'China',
    'imageurl':'lib/images/china.jpg',
  },

];

class _Stack2State extends State<Stack2> {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.red,
      height: 100,
      child: ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount:maplist.length ,
          itemBuilder: (context,index){
          return MyCard(map: maplist[index],
          );
          }),
    );
  }
}

定制小部件卡

class MyCard extends StatelessWidget {
  final Map<String, dynamic> map;

  const MyCard({Key? key, required this.map}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
        width: 160,
        padding: EdgeInsets.only(left: 15),
        margin: EdgeInsets.only(left: 15),
        decoration: BoxDecoration(
          color: Colors.black,
          borderRadius: BorderRadius.circular(15),
          image: DecorationImage(
            image: AssetImage(map['imageurl']),
            fit: BoxFit.cover,
            opacity: 0.7,
          ),
        ),
        child: Padding(
            padding: EdgeInsets.only(top: 10),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
              Text(
              map['country'],
              style: TextStyle(
                  fontSize: 20,
                  fontWeight: FontWeight
                      .
                  w600
              ),),],

            ),),);
  }
}
7kqas0il

7kqas0il2#

您需要做的是创建或导入一个包含要显示的元素的字符串列表:

List<String> cities = [London, Paris, Madrid];

然后将列表[索引]提供给Text Widget:

Padding(
                    padding: EdgeInsets.only(top: 10),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: \[
                        Text(
                          cities[index], //add this
                          style: TextStyle(
                              fontSize: 20,
                              fontWeight: FontWeight.w600),
                        ),

相关问题