Flutter -PageView Builder＆amp;卡 - 在每张卡上显示不同的信息

Question

我正在尝试使用pageview和卡。我的目标是在用户可以看到的第四张卡上显示不同的信息。 更确切地说，在一张卡上，我可以显示一个标题。在第二张卡上，我将在第三张卡上显示日期，它可能是一些随机文本... 我希望这很清楚。 为了给您更多的颜色，信息将来自Firebase。 我不知道如何轻松地做到这一点。我考虑过创建4个小部件mycard，其中包含不同的信息并使用它们。但是我想做一些更专业和高效的事情。谢谢

Firebase，我不使用JSON。我在Firebase中有一个简单的文档。在本文档中，我有几个字段，例如“价格”“数量”“参考” ... 我只希望每张卡从此Firebase文档中显示两个或三个字段。

class MyBodyWindMill extends StatefulWidget {
  const MyBodyWindMill({Key key}) : super(key: key);

  @override
  _MyBodyWindMillState createState() => _MyBodyWindMillState();
}

class _MyBodyWindMillState extends State<MyBodyWindMill> {
  @override
  Widget build(BuildContext context) {
    return
  Container(
    height: 260,
    child: PageView.builder(controller: PageController(viewportFraction: 0.88),
    itemCount: 4,
    itemBuilder: ( _, i){
      return GestureDetector(
      child: Container(
      padding: const EdgeInsets.only(left:20, top:20),
      height: 220,
      width: MediaQuery.of(context).size.width-20,
      margin: const EdgeInsets.only(right:10),
      decoration: BoxDecoration(
      borderRadius: BorderRadius.circular(30),
      ),
      child:Column(
        children: [
          MyCard(),
        
                  ],
      ))
      );
  },
  ));

}}

class MyCard extends StatefulWidget {
  const MyCard( {Key key} ) : super(key: key);

  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  //String monText;
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 230,
      child: Stack(
        children: [
          Positioned(
            top: 35,
            left: 20,
            child: Card(
              elevation: 6.0,
              shadowColor: Colors.grey,
              child: Container(
                  height: 180,
                  width: 0.9,
                  decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(0.0),
                      boxShadow: [BoxShadow(
                        color: Colors.black.withOpacity(0.3),
                        offset: Offset(-10.0, 10.0),
                        blurRadius: 20.0,
                        spreadRadius: 4.0,
                      ),
                      ])
              ),
            ),
          ),
          Positioned(
            top: 0.0,
            left: 30.0,
              child:Card(
            elevation: 10.0,
            shadowColor: Colors.grey.withOpacity(0.5),
                shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(15.0),
                ),
                child: Container(
                  height: 200,
                width: 150,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    image: DecorationImage(
                    fit: BoxFit.fill,
                    image:AssetImage('assets/header.jpg'),
                ),
                ),
          ))),
          Positioned(
              top:40,
              left:200,
              child:
          Container(
            height: 150,
            width: 170,
            child:Column(
              crossAxisAlignment: CrossAxisAlignment.start,
                children:[
                  Text('Title: ', style: TextStyle(fontSize:16,
                      color:Colors.red),),
                  Divider(color:Colors.black),
                  Text('Info 1: ', style: TextStyle(fontSize:16,
                      color:Colors.red),),
                  Text('Info 2'),
              ])
          ))
        ],
      ),
    );
  }
}

Answer 1

根据您要做的事情，看起来您需要的是这样的小部件：

class InfoBlock {
  final String title;
  final String description;

  InfoBlock({
    required this.title,
    required this.description,
  });
}

class MyCard extends StatefulWidget {
  String title;
  List<InfoBlock> infoBlocks;
  MyCard({
    Key? key,
    required this.title,
    required this.infoBlocks,
  }) : super(key: key);

  @override
  _MyCardState createState() => _MyCardState();
}

class _MyCardState extends State<MyCard> {
  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Padding(
            padding: const EdgeInsets.all(8.0),
            child: Container(
                height: 200,
                width: 200,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10.0),
                    image: const DecorationImage(
                      fit: BoxFit.fill,
                      image: AssetImage('header.jpeg'),
                    ))),
          ),
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                widget.title,
                style: const TextStyle(fontSize: 30),
              ),
              ...widget.infoBlocks.map((block) {
                return Text(
                  '${block.title}: ${block.description}',
                  style: const TextStyle(fontSize: 16),
                );
              }),
            ],
          )
        ],
      ),
    );
  }
}

然后您可以像这样使用它：

Column(
    children: [
      MyCard(
        title: 'Quantity',
        infoBlocks: [
          InfoBlock(title: 'Price', description: '100'),
        ],
      ),
      MyCard(
        title: 'Status',
        infoBlocks: [
          InfoBlock(title: 'Txt1', description: 'value1'),
          InfoBlock(title: 'Txt2', description: 'value2'),
          InfoBlock(title: 'Txt3', description: 'value3'),
        ],
      ),
    ],
));

这就是输出的外观：

​链接到flutlab具有上述代码的链接完全功能：