我怎样才能在Flutter中精确地复制这种对齐?

brccelvz  于 2023-02-25  发布在  Flutter
关注(0)|答案(1)|浏览(129)

i具有包含行的列,在行中,我希望所有行中的第二项与其他列的行中的其他第二项对齐。
这幅图将使我更清楚地看到我想达到的目标。

如果你看到这个图像,你会注意到所有行中的所有第二个项目都有一个明确的开始。
这就是我能做到的。

这并不完全相同,因为我对每一行都有不同的值。如下面的代码所示

Padding(
                  padding: EdgeInsets.only(left: 22.0, right: 22.0, top: 22.0),
                  child: Column(
                    children: [
                      Row(
                        children: [
                          Text(
                            'Title',
                            style: GoogleFonts.poppins(
                              fontSize: 10,
                              fontWeight: FontWeight.w400,
                              fontStyle: FontStyle.italic,
                              color: Color(0xff34495E),
                            ),
                          ),
                          SizedBox(width: 55),
                          Text(
                            'Asoebi Gown',
                            style: GoogleFonts.poppins(
                              fontSize: 12,
                              fontWeight: FontWeight.w400,
                              color: Color(0xff596780),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Divider(
                        color: Color(0xff34495E).withOpacity(0.2),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Row(
                        children: [
                          Text(
                            'Quantity',
                            style: GoogleFonts.poppins(
                              fontSize: 10,
                              fontWeight: FontWeight.w400,
                              fontStyle: FontStyle.italic,
                              color: Color(0xff34495E),
                            ),
                          ),
                          Expanded(
                            child: FractionallySizedBox(
                              widthFactor: 0.8,
                              child: Text(
                                '12',
                                style: GoogleFonts.poppins(
                                  fontSize: 12,
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xff596780),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Divider(
                        color: Color(0xff34495E).withOpacity(0.2),
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Row(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: [
                          Text(
                            'Description',
                            style: GoogleFonts.poppins(
                              fontSize: 10,
                              fontWeight: FontWeight.w400,
                              fontStyle: FontStyle.italic,
                              color: Color(0xff34495E),
                            ),
                          ),
                          Expanded(
                            child: FractionallySizedBox(
                              widthFactor: 0.9,
                              child: Text(
                                'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.',
                                style: GoogleFonts.poppins(
                                  fontSize: 12,
                                  fontWeight: FontWeight.w400,
                                  color: Color(0xff596780),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                      SizedBox(
                        height: 15,
                      ),
                      Divider(
                        color: Color(0xff34495E).withOpacity(0.2),
                      ),
                    ],
                  ),)

谢谢你。

dba5bblo

dba5bblo1#

您可能正在寻找Table小部件。

Table(
    border: const TableBorder(
      horizontalInside: BorderSide(
        color: Colors.black45,
      ),
    ),
    defaultColumnWidth: const IntrinsicColumnWidth(),
    children: const [
      TableRow(
        children: [
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Title'),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Asoebi Gown'),
          ),
        ],
      ),
      TableRow(
        children: [
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Quantity'),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('12'),
          ),
        ],
      ),
      TableRow(
        children: [
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text('Description'),
          ),
          Padding(
            padding: EdgeInsets.all(8.0),
            child: Text(
                'Praesent vitae neque porta, hendrerit enim sed, temps ante. Suspendisse vitae massa neque. Praesent vitae neque porta, hendrerit enim sed, tempus ante.'),
          ),
        ],
      ),
    ],
  );

您可以专门指定horizontalInside边框来绘制分隔线。通过提供IntrinsicColumnWidth(),您可以告诉列使用其最大单元格的大小。如果希望此行为在各列之间有所不同,您还可以设置columnWidths并为每列提供不同类型的宽度。

相关问题