flutter - ShowModalBottomSheet 在 Flutter 中仅显示一个项目图像

Question

我正在尝试showModalBottomSheet通过使用flutter_bloc库来获取 api。下面是飞镖代码和示例 api 数据，根据 api 数据，我得到两张图像，但showModalBottomSheet其中只显示一张图像。它只显示一个的原因是什么。我还注意到，我无法更新文本颜色更改之类的内容showModalBottomSheet。

主页.dart

TextButton(
                onPressed: () {
                  showModalBottomSheet(
                    shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.only(
                            topRight: Radius.circular(24.0),
                            topLeft: Radius.circular(24.0))),
                    context: context,
                    builder: (_) => TableModalSheet(
                      id: id,
                      count: count,
                    ),
                  );
                },
              ),

TableModalSheet.dart

class TableModalSheet extends StatefulWidget {
  final int id;
  final int count;
  const TableModalSheet({Key? key, required this.id, required this.count})
      : super(key: key);
  @override
  _TableModalSheetState createState() => _TableModalSheetState(id, count)}
class _TableModalSheetState extends State<TableModalSheet> {
  late final int id;
  late final int count;
  late TableBloc tableBloc;
  _TableModalSheetState(this.id, this.count);
  @override
  void initState() {
    super.initState();
    tableBloc = BlocProvider.of<TableBloc>(context)
      ..add(LoadTableCapacityEvent(id, count));}
  @override
  Widget build(BuildContext context) {
    return Container(
      child: BlocBuilder<TableBloc, TableState>(builder: (context, state) {
        if (state is TableLoading) {
          return Center(child: PlatformCircularProgressIndicator());
        } else if (state is TableLoaded) {
          return buildModal(state.data);
        } else if (state is TableError) {
          return Center(child: Text(state.message));
        }
        return Container();}),);}
  Widget buildModal(List<TablesTables> data) {
    return Padding(
      padding: const EdgeInsets.only(
          left: 10.0, right: 10.0, bottom: 20.0, top: 20.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(''),
              Text(
                'Select Table',
                style: TextStyle(fontWeight: FontWeight.bold, fontSize: 17.0),),
              GestureDetector(
                onTap: () {
                  Navigator.pop(context);},
                child: Text(
                  'Done',
                  style: TextStyle(
                      color: TuxedoColor.redColor, fontWeight: FontWeight.bold),),),],),
          Container(
            height: MediaQuery.of(context).size.height * 0.175,
            child: ListView.builder(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                itemCount: data.length,
                itemBuilder: (BuildContext context, int index) {
                  return Container(
                    height: 100.0,
                    width: 100.0,
                    child: CachedNetworkImage(
                      imageUrl: data[index].tablePhotos![index]!.image!, //Here it is displaying only one image but i'm expecting to get two images
                      placeholder: (context, url) =>
                          Center(child: PlatformCircularProgressIndicator()),
                      errorWidget: (context, url, error) => Icon(Icons.error),
                    ),);}),)],),);}}

API数据

{
    "message": "Tables returend",
    "tables": [
        {
    "table_photos": [
                {
                    "id": "2",
                    "image": "https://cdn.fakercloud.com/avatars/calebogden_128.jpg",
                    "createdAt": "2021-09-09T13:45:31.089Z",
                    "updatedAt": "2021-09-09T13:45:31.089Z",
                    "tableId": "5"
                },
                {
                    "id": "7",
                    "image": "https://cdn.fakercloud.com/avatars/atanism_128.jpg",
                    "createdAt": "2021-09-09T13:45:31.089Z",
                    "updatedAt": "2021-09-09T13:45:31.089Z",
                    "tableId": "5"
                }
    }
]
}

标签： flutterdartflutter-blocflutter-showmodalbottomsheet