如何管理多行多列的对齐方式？答案

【问题标题】：How can I manage alignment with multiple rows and columns?如何管理多行多列的对齐方式？
【发布时间】：2022-11-26 19:43:37
【问题描述】：

我正在尝试用一些元素制作一张卡片。然而，很难将元素定位在多行多列的正确位置。我尝试使用 mainAxisAlignment、crossAxisAlignment、SizedBox、Expanded 等。特别是使用 Expanded 使我的小部件消失，这与我的预期不同。如何将元素定位到正确的位置？

What I did What I want

child: Container(
padding: EdgeInsets.all(10),
    child: Column(
        children:[
            Text('1'),
            Container(
                child: Row(
                    children:[
                        ClipRRect(
                            borderRadius: BorderRadius.circular(50),
                            child: Container(
                                width: 70,
                                height: 70,
                                color: Color(0xffD9D9D9),
                            ),
                        ),
                        Column(
                            children:[
                                Row(
                                    children:[
                                    Text('2'),
                                    Text('3'),
                                    Text('4'),
                                    ],
                                ),
                                Row(
                                    children:[
                                    Text('5'),
                                    Text('6')
                                    ]
                                ),
                                Row(
                                    children:[
                                    Text('7'),
                                    Text('8'),
                                    Text('9'),
                                    Text('10'),
                                    ],
                                ),
                            ],
                        ),
                    ],
                ),
            ),
            ],

        ),
    ),

【问题讨论】：

你知道Expanded widget 吗？
我像 Row(children:[Text('Text'),SizedBox(10,0),Text('Text')]) 一样使用它来在中间留出空间@Royalindo

标签： flutter alignment row multiple-columns

【解决方案1】：

这必须工作

Container(
      padding: EdgeInsets.all(10),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisSize: MainAxisSize.max,
        children:[
          Text('1'),
          Container(
            child: Row(
              children:[
                ClipRRect(
                  borderRadius: BorderRadius.circular(50),
                  child: Container(
                    width: 70,
                    height: 70,
                    color: Color(0xffD9D9D9),
                  ),
                ),
                Expanded(
                  child: Column(
                    children:[
                      Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children:[
                          Expanded(
                            child: Row(
                              children: [
                                Text('2'),
                                Text('3'),
                              ],
                            ),
                          ),
                          Expanded(child: Row(
                            children: [
                              Text('4')
                            ],
                          )),
                        ],
                      ),
                      Row(
                          children:[
                            Text('5'),
                            Text('6')
                          ]
                      ),
                      Row(
                        children:[
                          Expanded(child: Row(
                            children: [
                              Text('7'),
                              Text('8'),
                            ],
                          )),
                          Expanded(child: Row(
                            children: [
                              Text('9'),
                              Text('10'),
                            ],
                          ))
                        ],
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ),
        ],

      ),
    )

【讨论】：