Question

<HotelDatePicker 
  :show-datepicker= "showDatepicker"
  :showDatepicker="showDatepicker"
  :isOpen="showDatepicker"
  style="z-index:20000"
  :hoveringTooltip="true"
  :closeDatepickerOnClickOutside="false"
  format="D MMMM">
</HotelDatePicker>

这是我的代码。我想在每个图像上添加文本。食物文字名称应更改。有什么办法吗？它采用堆栈形式，并且图像上必须包含文本。对于第一张图片“汉堡”，对于第二张图片“比萨”，依此类推。

请帮助我

Answer 1

创建列表列表：

List myList = [['image url', 'burger'], [''image', 'pizza'] , ..etc];

现在您可以使用它们了：

myList.map((i){
      return Builder(
        builder:(BuildContext context){
         return Container(
            width: MediaQuery.of(context).size.width,
           child: GestureDetector(
            child:Stack(
              children: <Widget>[
                Image.asset(i[0],fit: BoxFit.fill,),
                Align(
                  alignment: Alignment.topCenter,
                    child: Text(i[1],style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),)
                )
              ],
            ),
             onTap: (){
               Navigator.push(
                 context,
                 MaterialPageRoute(builder: (context) => HomePage()),
               );
             },
           ),
          );
        }

Answer 2

创建模型列表并为模型列表中的图像和文本分配值

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: 
          my_page(),

      ),
    );
  }
}
class MyPageItem{
  String itemName;
  String path;
  MyPageItem(this.itemName,this.path);
}
class my_page extends StatefulWidget {
  @override
  _my_pageState createState() => _my_pageState();
}

class _my_pageState extends State<my_page> {
  List<MyPageItem> items=[
    MyPageItem("item 1",'assets/images/1.jpg'),
    MyPageItem("item 2",'assets/images/2.jpg'),
    MyPageItem("item 3",'assets/images/3.jpg'),
    MyPageItem("item 4",'assets/images/4.jpg'),
    MyPageItem("item 5",'assets/images/5.jpg'),


  ];

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('mypage'),),
      body: CarouselSlider(
        autoPlay: true,
        items:items.map((i){
          return Builder(
            builder:(BuildContext context){
             return Container(

                width: MediaQuery.of(context).size.width,
               child: GestureDetector(
                child:Stack(
                  children: <Widget>[
                    Image.asset(i.path,fit: BoxFit.fill,),
                    Align(
                      alignment: Alignment.topCenter,
                        child: Text(i.itemName,style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),)
                    )
                  ],
                ),
                 onTap: (){
                   Navigator.push(
                     context,
                     MaterialPageRoute(builder: (context) => HomePage()),
                   );
                 },
               ),
              );
            }
          );
        }).toList()
      ),
    );
  }
}

带有文本的颤动轮播滑块

2 个答案: