Flutter 行列布局不是全宽

Question

我想在屏幕右侧显示“优先级”，但我无法将列设置为全宽。 MainAxisAlignment 无法扩展字段。

child: Column(
            children: [
              Padding(
                padding: const EdgeInsets.all(12.0),
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.center,
                        children: [
                            Icon(Icons.task_alt_sharp , size: 50.0),
                            SizedBox(width: 20.0),
                            Container(
                              decoration: BoxDecoration(
                                  border: Border.all(color: Colors.blueAccent)
                              ),
                              child: Column(
                                crossAxisAlignment: CrossAxisAlignment.start,
                                children:[
                                  Row(
                                      mainAxisAlignment: MainAxisAlignment.end,
                                      //crossAxisAlignment: CrossAxisAlignment.center,
                                      children: [
                                        Text(task.tag,style: const TextStyle(fontSize: 20, color: Colors.blue)),
                                        Text(" Priority "),
                                        Text(" Priority "),
                                      ],
                                    ),
                                  SizedBox(height: 5.0),
                                  Text(task.omschrijving),
                                ]
                              ),
                            )
                          ]
                    ),

Answer 1

您需要扩展容器

Column(children: [
        Padding(
            padding: const EdgeInsets.all(12.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Icon(Icons.transform, size: 50.0),
                    SizedBox(width: 20.0),
                    Expanded( // here changes need
                      child: Container(
                        decoration: BoxDecoration(
                            border: Border.all(color: Colors.blueAccent)),
                        child: Column(
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: [
                              Row(
                                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                                //crossAxisAlignment: CrossAxisAlignment.center,
                                children: [
                                  Text("P645",
                                      style: const TextStyle(
                                          fontSize: 20, color: Colors.blue)),
                                  Text(" Priority "),
                                ],
                              ),
                              SizedBox(height: 5.0),
                              Text(task.omschrijving),
                            ]),
                      ),
                    )
                  ],
                ),
              ],
            ))
      ])

Answer 2

试试下面的代码希望对你有帮助。参考 Row() class here refer layout here

    Column(
      children: [
        Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Icon(
                    Icons.task_alt_sharp,
                    size: 50.0,
                  ),
                  SizedBox(width: 20.0),
                  Container(
                    decoration: BoxDecoration(
                      border: Border.all(
                        color: Colors.blueAccent,
                      ),
                    ),
                    child: Column(
//                       crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          //crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text(
                              'task.tag',
                              style: const TextStyle(
                                fontSize: 20,
                                color: Colors.blue,
                              ),
                            ),
                            Text(" Priority "),
                            Text(" Priority "),
                          ],
                        ),
                        SizedBox(height: 5.0),
                        Text('task.omschrijving'),
                      ],
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ],
    ),

结果屏幕->

Flutter 行列布局不是全宽

Flutter Row Column Layout not full width

flutter

flutter-layout