为什么我的卡片不能在 Flutter 中被放置在屏幕的中间

1sbrub3j  于 2022-11-25  发布在  Flutter
关注(0)|答案(1)|浏览(138)

我试着在类文件中放置几个中心,只会有2个问题,一个是中心不工作,另一个是错误,我在代码中放置了错误吗?我不确定我的小部件出了什么问题,或者我对小部件感到困惑

import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:hupcarwashemployee/user_model/employee.dart';

import '../user_model/assignment.dart';

class UpdateAssignStatus extends StatefulWidget {
  final String id;
  UpdateAssignStatus(
      {required this.id});

  @override
  State<UpdateAssignStatus> createState() => _UpdateAssignStatusState();
}

class _UpdateAssignStatusState extends State<UpdateAssignStatus> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Assign'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          children: [
            StreamBuilder<List<Assignment>>(
              stream: read(widget.id.toString()),
              builder: (context, snapshot){
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
                if (snapshot.hasError) {
                  return const Center(
                    child: Text("some error occured"),
                  );
                }
                if(snapshot.hasData){
                  final userData = snapshot.data;
                  return Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(
                          height: 400,
                          width: 300,
                          child: ListView.builder(
                            itemCount: userData!.length,
                            itemBuilder: (context, index){
                              final assignment = userData[index];
                              return SizedBox(
                                height: 400,
                                width: 300,
                                child: Card(
                                  shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
                                  child: Column(
                                    children: [
                                      Table(
                                        children: [
                                          TableRow(
                                              children: [
                                                const Center(child: Text('Date', style: TextStyle(fontFamily: 'MonMed'),)),
                                                Text(': ${assignment.date.toString()}', style: const TextStyle(fontFamily: 'MonMed'),),
                                              ]
                                          ),
                                          const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
                                          TableRow(
                                              children: [
                                                const Center(child: Text('Customer Name', style: TextStyle(fontFamily: 'MonMed'),)),
                                                Text(': ${assignment.custName.toString()}', style: const TextStyle(fontFamily: 'MonMed'),),
                                              ]
                                          ),
                                          const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
                                          TableRow(
                                              children: [
                                                const Center(child: Text('Car Name', style: TextStyle(fontFamily: 'MonMed'),)),
                                                Text(': ${assignment.carName.toString()}', style: const TextStyle(fontFamily: 'MonMed'),),
                                              ]
                                          ),
                                          const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
                                          TableRow(
                                              children: [
                                                const Center(child: Text('Car Plate', style: TextStyle(fontFamily: 'MonMed'),)),
                                                Text(': ${assignment.carPlate.toString()}', style: const TextStyle(fontFamily: 'MonMed'),),
                                              ]
                                          ),
                                          const TableRow(children: [SizedBox(height: 10,), SizedBox(height: 10,)]),
                                        ],
                                      )
                                    ],
                                  ),
                                ),
                              );
                            },
                          )
                      ),
                    ],
                  );
                }
                return const Center(
                  child: CircularProgressIndicator(),
                );
              },
            ),
          ],
        ),
      ),
    );
  }
  static Stream<List<Assignment>> read(String type) {
    final serviceCollection = FirebaseFirestore.instance.collection('Assignment').where('id',isEqualTo: type);
    return serviceCollection.snapshots().map((querySnapshot) =>
        querySnapshot.docs.map((e) => Assignment.fromSnapshot(e)).toList());
  }
}

这个

是我想看到的用户界面,就像中间的一张卡片,上面有信息,这个图片

是我当前的屏幕,我想让卡片成为屏幕的中心,可以吗?

agxfikkp

agxfikkp1#

把这个mainAxisAlignment: MainAxisAlignment.center,放在它上面
您的代码应该如下所示:

Center(
    child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        SizedBox(
          height: 400,
          width: 300,
          child: Card(
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
            child: Column(
              children: [
                Table(
                  children: [
                    TableRow(children: [
                      const Center(
                          child: Text(
                        'Date',
                        style: TextStyle(fontFamily: 'MonMed'),
                      )),
                      Text(
                        ': data',
                        style: const TextStyle(fontFamily: 'MonMed'),
                      ),
                    ]),
                    const TableRow(children: [
                      SizedBox(
                        height: 10,
                      ),
                      SizedBox(
                        height: 10,
                      )
                    ]),
                    TableRow(children: [
                      const Center(
                          child: Text(
                        'Customer Name',
                        style: TextStyle(fontFamily: 'MonMed'),
                      )),
                      Text(
                        ': data',
                        style: const TextStyle(fontFamily: 'MonMed'),
                      ),
                    ]),
                    const TableRow(children: [
                      SizedBox(
                        height: 10,
                      ),
                      SizedBox(
                        height: 10,
                      )
                    ]),
                    TableRow(children: [
                      const Center(
                          child: Text(
                        'Car Name',
                        style: TextStyle(fontFamily: 'MonMed'),
                      )),
                      Text(
                        ': data',
                        style: const TextStyle(fontFamily: 'MonMed'),
                      ),
                    ]),
                    const TableRow(children: [
                      SizedBox(
                        height: 10,
                      ),
                      SizedBox(
                        height: 10,
                      )
                    ]),
                    TableRow(children: [
                      const Center(
                          child: Text(
                        'Car Plate',
                        style: TextStyle(fontFamily: 'MonMed'),
                      )),
                      Text(
                        ': data',
                        style: const TextStyle(fontFamily: 'MonMed'),
                      ),
                    ]),
                    const TableRow(children: [
                      SizedBox(
                        height: 10,
                      ),
                      SizedBox(
                        height: 10,
                      )
                    ]),
                  ],
                )
              ],
            ),
          ),
        ),
      ],
    ),
  )),

结果:

如果您只有一张卡,则此解决方案有效,如上所述,您只需要一张卡

相关问题