在Flutter项目中固定卡片的侧面

2guxujil  于 2022-12-24  发布在  Flutter
关注(0)|答案(1)|浏览(117)

我正在尝试修复卡的两侧,因为一面接触到边框,另一面离边框很远。我尝试了几个选项,但都没有解决我的问题。我还尝试缩短文本字段的宽度,但我无法做到。
这是我得到的混乱的结果:

下面是该卡的代码:

Card(
                  elevation: 4,
                  shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10)),
                  color: const Color(0xFFF4F6FD),
                  margin:
                      const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      FutureBuilder<List<Article_details_Model>>(
                        future: futureArticle_details,
                        builder: (BuildContext context,
                            AsyncSnapshot<List<Article_details_Model>> snapshot) {
                          if (snapshot.hasData) {
                            return Column(
                              children: List.generate(
                                snapshot.data!.length,
                                (index) => Column(
                                  children: [
                                    const Gap(10),
                                    Text(
                                      snapshot.data![index].name,
                                      textAlign: TextAlign.start,
                                      style: const TextStyle(
                                        fontSize: 24,
                                        fontWeight: FontWeight.bold,
                                      ),
                                    ),
                                    const Gap(10),
                                    Table(
                                      children: [
                                        const TableRow(children: [
                                          Text(
                                            'No.',
                                            style: TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                            ),
                                          ),
                                          Text(
                                            'Counts',
                                            style: TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                            ),
                                          ),
                                          Text(
                                            'Last Order',
                                            style: TextStyle(
                                              fontSize: 15,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                            ),
                                          ),
                                          Text(
                                            'New Counts',
                                            style: TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                            ),
                                          ),
                                          Text(
                                            'New Order',
                                            style: TextStyle(
                                              fontSize: 18,
                                              fontWeight: FontWeight.bold,
                                              color: Colors.black,
                                            ),
                                          )
                                        ]),

                                        // Iterate over the sequences list and display the sequence information
                                        for (var sequence
                                            in snapshot.data![index].sequences)
                                          TableRow(children: [
                                            Text(
                                              '${sequence.no}',
                                              style: const TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black,
                                              ),
                                            ),
                                            Text(
                                              '${sequence.counts}',
                                              style: const TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black,
                                              ),
                                            ),
                                            Text(
                                              '${sequence.order}',
                                              style: const TextStyle(
                                                fontSize: 18,
                                                fontWeight: FontWeight.bold,
                                                color: Colors.black,
                                              ),
                                            ),
                                            TextField(
                                              keyboardType:
                                                  TextInputType.number,
                                              decoration: InputDecoration(),
                                            ),
                                            TextField(
                                              keyboardType:
                                                  TextInputType.number,
                                              decoration: InputDecoration(),
                                            ),
                                          ])
                                      ],
                                    ),
                                  ],
                                ),
                              ),
                            );
                          } else if (snapshot.hasError) {
                            print(snapshot.error);
                            return Text('${snapshot.error}');
                          }
                          return const CircularProgressIndicator();
                        },
                      ),
                    ],
                  ),
                ),

我的问题是
我怎样才能固定卡片的两边,使它有一点空间,我怎样才能减少文本域的宽度。

ubby3x7f

ubby3x7f1#

使用填充:

Card(
                      elevation: 4,
                      shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10)),
                      color: const Color(0xFFF4F6FD),
                      margin:
                          const EdgeInsets.symmetric(horizontal: 5, vertical: 5),
                      child:

Padding( 
 padding: const EdgeInsets.all(18.0), //change here
 child :Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          FutureBuilder<List<Article_details_Model>>(
                            future: futureArticle_details,
                            builder: (BuildContext context,
                                AsyncSnapshot<List<Article_details_Model>> snapshot) {
                              if (snapshot.hasData) {
                                return Column(
                                  children: List.generate(
                                    snapshot.data!.length,
                                    (index) => Column(
                                      children: [
                                        const Gap(10),
                                        Text(
                                          snapshot.data![index].name,
                                          textAlign: TextAlign.start,
                                          style: const TextStyle(
                                            fontSize: 24,
                                            fontWeight: FontWeight.bold,
                                          ),
                                        ),
                                        const Gap(10),
                                        Table(
                                          children: [
                                            const TableRow(children: [
                                              Text(
                                                'No.',
                                                style: TextStyle(
                                                  fontSize: 18,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'Counts',
                                                style: TextStyle(
                                                  fontSize: 18,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'Last Order',
                                                style: TextStyle(
                                                  fontSize: 15,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'New Counts',
                                                style: TextStyle(
                                                  fontSize: 18,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              ),
                                              Text(
                                                'New Order',
                                                style: TextStyle(
                                                  fontSize: 18,
                                                  fontWeight: FontWeight.bold,
                                                  color: Colors.black,
                                                ),
                                              )
                                            ]),
    
                                            // Iterate over the sequences list and display the sequence information
                                            for (var sequence
                                                in snapshot.data![index].sequences)
                                              TableRow(children: [
                                                Text(
                                                  '${sequence.no}',
                                                  style: const TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                Text(
                                                  '${sequence.counts}',
                                                  style: const TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                Text(
                                                  '${sequence.order}',
                                                  style: const TextStyle(
                                                    fontSize: 18,
                                                    fontWeight: FontWeight.bold,
                                                    color: Colors.black,
                                                  ),
                                                ),
                                                TextField(
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(),
                                                ),
                                                TextField(
                                                  keyboardType:
                                                      TextInputType.number,
                                                  decoration: InputDecoration(),
                                                ),
                                              ])
                                          ],
                                        ),
                                      ],
                                    ),
                                  ),
                                );
                              } else if (snapshot.hasError) {
                                print(snapshot.error);
                                return Text('${snapshot.error}');
                              }
                              return const CircularProgressIndicator();
                            },
                          ),
                        ],
                      ),)
                    ),

相关问题