flutter 旋转木马 slider 带文字

Question

class my_page extends StatefulWidget {
  @override
  _my_pageState createState() => _my_pageState();
}

class _my_pageState extends State<my_page> {

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('mypage'),),
      body: CarouselSlider(
        autoPlay: true,
        items:['assets/images/0.jpg','assets/images/1.jpg',
            'assets/images/2.jpg',
          'assets/images/3.jpg',
          'assets/images/4.jpg',
          'assets/images/5.jpg'].map((i){
          return Builder(
            builder:(BuildContext context){
             return Container(

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

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

请帮帮我

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

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

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