想要在列内均匀间隔以实现灵活的小部件颤动

Question

我希望为列内的灵活小部件提供均匀的空间。但类型不同，我的意思是两个小部件是文本表单字段，一个是文本。两个灵活的文本表单字段在底部占用了额外的空间，我不知道它们如何占用间距。即使我知道我可以使用

SizedBox()

来对齐。我如何知道或删除额外的对齐间距。 我描述我的问题。

这是我的两个文本字段代码。

Flexible(
              flex: 1,
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Text(
                        AppLocalizations.of(context).translate('Paynow'),
                        style: kLabelTextStyle(
                            color: Colors.black87,
                            size: 16,
                            weight: FontWeight.normal),
                      ),
                    ),
                    Flexible(
                      flex: 2,
                      child: TextFormField(
                        decoration: kTextFormFieldsDecoration(
                          hintText: 'Max $remainingAmount',
                          fontSize: 13,
                          kFontColor: Colors.grey,
                        ).copyWith(helperText: ''),
                        keyboardType: TextInputType.number,
                        validator: _validate,
                        textInputAction: TextInputAction.done,
                        onChanged: (value) {},
                        onSaved: (value) {},
                      ),
                    ),
                  ],
                ),
              ),
            ),

这是带有文本的中间小部件

Flexible(
              flex: 1,
              child: Container(
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.blue),
                ),
                child: Row(
                  crossAxisAlignment: CrossAxisAlignment.baseline,
                  textBaseline: TextBaseline.alphabetic,
                  children: <Widget>[
                    Flexible(
                      flex: 1,
                      fit: FlexFit.tight,
                      child: Text(
                        'Paynow',
                        style: kLabelTextStyle(
                            color: Colors.black87,
                            size: 16,
                            weight: FontWeight.normal),
                      ),
                    ),
                    Flexible(
                        flex: 2,
                        child: Text(
                          'H',
                        )),
                  ],
                ),
              ),
            ),

将这三个灵活的小部件包裹在 Container 的 Column 中

Flexible(
              flex: 2,
              fit: FlexFit.tight,
              child: Container(
                decoration:
                    BoxDecoration(border: Border.all(color: Colors.red)),
                height: 500,
                child: Column(
                  children: [],
                ),
              ),
            ),

Answer 1

您可以使用扩展而不是灵活来实现每个尺寸均匀。 您想在这种布局中使用灵活有什么具体原因吗？

Answer 2

它也可以包裹在

Flex

小部件内，使用

spaceBetween

选项进行对齐。

Container(
  color: Colors.grey[300],
  child: SizedBox(
  height: 300,
  child: Flex(
  mainAxisAlignment: MainAxisAlignment.spaceBetween,
  direction: Axis.vertical,
  children: [elem1, elem2, elem3]))) 

在此输入图片描述