如何在Flutter中实现嵌套视图（动态页面）？

Question

我正在尝试在Flutter中实现预订确认页面。该应用程序允许用户预订航班，火车，出租车，住宿等。无论用户预订了什么，我都希望确认页面显示预订信息。我希望页面考虑以下情况：

1. 用户可以预订单人服务或退货服务
2. 用户可以预订航班和火车或仅预订航班。

我想使用以下方法，例如CustomScrollView，StatefulBuilder，SliverList，ListTile。但是，我不知道如何考虑以上所有情况。

我该如何实现？

我已经创建了一些虚拟数据：

class SummaryData {
  String serviceName; //flight,train
  List<SingleService> lisOfService;
  SummaryData(this.serviceName, this.lisOfService);
}

//from - to section
class SingleService {
  var origin, destination;
  var takeOfTime;
  var serviceProvide;

  SingleService(this.origin, this.destination, this.takeOfTime, this.serviceProvider);
}

class SummaryDataRepository {
  List<SummaryData> listOfSummaryData;
  SummaryDataRepository() {
    listOfSummaryData = new List<SummaryData>();
    listOfSummaryData.add(new SummaryData(
        "Flight", [new SingleService("London", "Rome", "11:00", "AirX")]));
    listOfSummaryData.add(new SummaryData(
        "Train", [new SingleService("London", "Heathrow", "10:00", "TrainX")]));
  }

  List<SummaryData> getSummaryData() {
    return listOfSummaryData;
  }
}

Answer 1

如果要加载的页面中的可能性有限，则可能要使用路线和导航。但是，如果您必须始终动态加载页面，则可能要使用动态窗口小部件包。您可以在这里了解更多信息：https://pub.dev/packages/dynamic_widget

Answer 2

这是我自己的问题的解决方案-万一有人发现它有用。

class SummaryPage extends StatelessWidget {
  SummaryDataRepository summaryDataRepository = new SummaryDataRepository();
  @override
  Widget build(BuildContext context) {
    return Container(
        child: new ListView.builder(
            scrollDirection: Axis.vertical,
            shrinkWrap: true,
            itemCount: summaryDataRepository.listOfSummaryData.length,
            itemBuilder: (BuildContext context, i) => ListTile(
                    title: new Card(
                        child: new Column(
                  mainAxisAlignment: MainAxisAlignment.start,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Text(
                      summaryDataRepository.listOfSummaryData[i].serviceName
                          .toString(),
                      style: TextStyle(
                          fontSize: 25.0, fontWeight: FontWeight.w600),
                      textAlign: TextAlign.left,
                    ),
                    new ListView.builder(
                        scrollDirection: Axis.vertical,
                        shrinkWrap: true,
                        itemCount: summaryDataRepository
                            .listOfSummaryData[i].lisOfService.length,
                        itemBuilder: (BuildContext c, j) => ListTile(
                            title: _drawService(
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .origin,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .destination,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .takeOfTime,
                                summaryDataRepository
                                    .getSummaryData()[i]
                                    .lisOfService[j]
                                    .serviceProvider)))
                  ],
                )))));
  }

  _drawService(origin, destination, takeOfTime, serviceProvider) {
    return new Container(
        child: new Column(
      children: <Widget>[
        new Text("$origin - $destination"),
        new Text(takeOfTime),
        new Text(serviceProvider),
      ],
    ));
  }
}