卡里面的卡

Question

在Flutter中创建一个本地餐厅/酒吧/小酒馆的应用程序，我想在菜单中显示一张卡片，上面的所有其他卡片显示临时消息/交易。我的实现依赖于一个menu_screen和一个类似的“处理程序”（请注意，还没有完全开发）。

但有两个问题

1. 它显示为卡中的卡
2. 当信息只应在屏幕顶部显示一次时，却显示了两次

下面是它在测试设备上运行时的样子

menu_screen的Pastebin:在此处输入链接描述

//  sets up the menu screen for our program
 
//  imports
 
import 'package:flutter/material.dart';
import 'package:elehouseapp/handlers/food_menu_handler.dart';
 
//  set up class
class Menus extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: TabBar(
            labelColor: Colors.black,
            indicatorColor: Colors.black,
            tabs: <Widget>[
              Tab(
                text: 'Food',
              ),
              Tab(
                text: 'Drink',
              ),
            ]
        ),
        body: TabBarView(
          children: <Widget>[
            FoodHandler(),
            //Text("Food"),
            Text("Drink"),
          ],
        ),
      ),
    );
  }
}

food_menu_handler的Pastebin:在此处输入链接描述

import 'package:flutter/material.dart';

//  Generates an 2D array of food items and places elements into cards

//  Some data
final items = ['test','test2'];
final desc = ["Loreum Isplum","Other Test"];
final price = [2.20,20.00];

//  Handles array data and puts into cards
class FoodHandler extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return ListView.builder(
        itemCount: items.length,
        itemBuilder: (context, index){
          return Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
              Visibility(
                visible: true,
                child: Card(
                  child: ListTile(
                    title: Text("COVID-19"),
                    subtitle: Text("Menu restrictions are in place"),
                  ),
                )
                  ),
                ListTile(
                  title: Text(items[index]),
                  subtitle: Text(desc[index]+"\n£"+price[index].toString()),
                ),
                ButtonBar(
                    children: <Widget>[
                      FlatButton(
                        child: Text("Add to Basket"),
                        onPressed: null,
                      ),
                    ],
                  ),
              ],
            ),
          );
        }
    );
  }
}

编辑我已取消嵌套卡（如指出的）。希望这能解释我想要做的事情

Answer 1

您可以在普通ListView中更改ListView.Builder，并使用列表中的条件和循环生成其子级列表，如下所示:

//  Generates an 2D array of food items and places elements into cards

//  Some data
final items = ['test', 'test2'];
final desc = ["Loreum Isplum", "Other Test"];
final price = [2.20, 20.00];

//  Handles array data and puts into cards
class FoodHandler extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        if (1 == 1) // TODO your condition here
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Card(
                  child: ListTile(
                    title: Text("COVID-19"),
                    subtitle: Text("Menu restrictions are in place"),
                  ),
                ),
              ],
            ),
          ),
        for (int index = 0; index < items.length; index++)
          Card(
            child: Column(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                ListTile(
                  title: Text(items[index]),
                  subtitle: Text(desc[index] + "\n£" + price[index].toString()),
                ),
                ButtonBar(
                  children: <Widget>[
                    FlatButton(
                      child: Text("Add to Basket"),
                      onPressed: null,
                    ),
                  ],
                ),
              ],
            ),
          ),
      ],
    );
  }
}

我用一个TODO标记了你必须插入第一个“警报”条件的那一行。

另外，我建议您使用一个类来表示列表项，而不是使用三个不同的列表并将它们与索引“连接”起来，这是一种更方便，更优雅的解决方案