Question

我想水平扩展一列，同时让孩子（图标和文本）居中。

当我使用CrossAxisAlignment.center时，它不会计算其父级宽度。所以我尝试了CrossAxisAlignment.stretch。

#!/bin/bash
#BSUB -J randJobName_ul0vm[1-6]%22
#BSUB -oo <pathToLog>/log/randJobName_ul0vm.o.%J.%I    
#BSUB -q "server.q"
#BSUB -n 2
#BSUB -R "span[hosts=1]"

JOB_ID=$LSB_JOBID
SGE_TASK_ID=$LSB_JOBINDEX
JOB_NAME=$LSB_JOBNAME

#### Squirrel changes begin #####

INDEX=$((SGE_TASK_ID-1))     # this ranges over 0,1,2,3,4,5 over the 6 tasks
InputIdx=$(( INDEX / 2 ))    # this ranges over 0,0,1,1,2,2
ParameterIdx=$(( INDEX / 3)) # this ranges over 0,0,0,1,1,1

declare -a Input
Input[0]="input1 input2"
Input[1]="input3 input4"
Input[2]="input5 input6"

declare -a Parameter
Parameter[0]="parameter1"
Parameter[1]="parameter2"

python pythoncode.py ${Parameter[${ParameterIdx}]} ${Input[${InputIdx}]}

即使图标居中，此处的文本也向左对齐。我不明白这一点，将不胜感激。

Answer 1

我发现hack可能不是确切的解决方案，但对我有用。

可能还有其他解决方案

为SizedBox添加了width框小部件，因为我们需要将horizontally居中。

Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.help),
            Text('Please help!'),
            SizedBox(
              width: double.infinity, // it will take entire available device width
              height: 0,
            )
          ],
        ),

Answer 2

您是否尝试过将列包装在容器中并将宽度设置为double.infinity？

Container(
    width: double.infinity,
    child: Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
            Icon(Icons.help),
            Text('Please help!'),
        ],
    ),
)

Answer 3

另一种方式。

Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
        Row(
          children: <Widget>[
            Expanded(
              child: Container(),
            ),
            Icon(
              Icons.help,
              color: Colors.white,
            ),
            Expanded(
              child: Container(),
            ),
          ],
        ),
        Row(
          children: <Widget>[
            Expanded(
              child: Container(),
            ),
            Text('Please help!'),
            Expanded(
              child: Container(),
            ),
          ],
        )
      ],
    )

Answer 4

正确的做法是：

Center( // it helps column stretch
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center, // it helps child stay in center
    children: ...,
  )
)

如何在使孩子居中的同时伸展一列

4 个答案: