Flutter项目Card侧边间距调整与TextField宽度缩小问题求助

一、调整Card侧边间距 #

1. 添加内部Padding：Card的margin仅控制外部与其他组件的间距，内部内容需要通过Padding组件和Card边框拉开距离，避免内容紧贴Card边缘。
2. 优化外部margin值：将原horizontal:5调整为更合理的数值，确保Card与屏幕边框保持合适间距，不会出现一侧紧贴、另一侧溢出的情况。

二、缩小TextField宽度 #

在Table布局中，TextField默认会占满所在单元格宽度，可通过两种方式控制：

• 固定列宽：给Table设置columnWidths属性，精确分配每一列的宽度，限制TextField所在列的整体宽度。
• 包裹SizedBox：用SizedBox直接包裹TextField，指定输入框的具体宽度，配合Table列宽进一步约束显示范围。

修改后的完整代码 #

Card(
  elevation: 4,
  shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(10)),
  color: const Color(0xFFF4F6FD),
  margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 8), // 调整外部间距
  child: Padding( // 添加内部padding，隔离内容与Card边框
    padding: const EdgeInsets.all(16.0),
    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(
                        columnWidths: const { // 固定每列宽度，索引从0开始
                          0: FixedColumnWidth(60),
                          1: FixedColumnWidth(80),
                          2: FixedColumnWidth(100),
                          3: FixedColumnWidth(100),
                          4: FixedColumnWidth(100),
                        },
                        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,
                              ),
                            )
                          ]),

                          // 遍历sequences列表展示信息
                          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,
                                ),
                              ),
                              SizedBox( // 限制TextField宽度
                                width: 80,
                                child: TextField(
                                  keyboardType: TextInputType.number,
                                  decoration: const InputDecoration(
                                    contentPadding: EdgeInsets.symmetric(horizontal: 8),
                                  ),
                                ),
                              ),
                              SizedBox( // 限制TextField宽度
                                width: 80,
                                child: TextField(
                                  keyboardType: TextInputType.number,
                                  decoration: const InputDecoration(
                                    contentPadding: EdgeInsets.symmetric(horizontal: 8),
                                  ),
                                ),
                              ),
                            ])
                        ],
                      ),
                    ],
                  ),
                ),
              );
            } else if (snapshot.hasError) {
              print(snapshot.error);
              return Text('${snapshot.error}');
            }
            return const CircularProgressIndicator();
          },
        ),
      ],
    ),
  ),
),

关键修改说明 #

• Card间距优化：通过Padding组件给Card内部内容增加边距，同时调整margin值让Card与屏幕边框保持均匀间距，解决一侧紧贴、另一侧溢出的问题。
• TextField宽度控制：结合Table.columnWidths固定列宽，再用SizedBox约束TextField的实际显示宽度，同时添加contentPadding优化输入框内的文字间距，提升视觉体验。

内容的提问来源于stack exchange，提问作者A_K