右侧的TextFormfield

Question

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

我知道这不是一件很难做的事情，但我已经坚持了一段时间了。有没有办法使文本格式字段和文本(单元)显示在屏幕的右侧？我试着使用填充，但它们并不一致，而且在不同的屏幕上，它看起来很简单，weird.Its，但我搞不懂

Answer 1

您可以简单地在Row小部件中使用Spacer。Spacer实际做的是占用屏幕上的所有可用空间。你可以这样做：

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Spacer(),    //It will take all the available space on the left
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Answer 2

您可以将Spacer()小部件添加到您的行：

class VitalWidget extends StatelessWidget {
  VitalWidget({
    this.vitalType,
    this.unit,
    this.initialValue,
    Key key,
  }) : super(key: key);
  final String vitalType;
  final String unit;
  final String initialValue;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          children: [
            Padding(
              padding: const EdgeInsets.only(left: 40),
              child: Text(
                vitalType,
                style: TextStyle(fontSize: 15),
              ),
            ),
            const Spacer(), //<- this pushes your textfield to the right
            Row(
              children: [
                SizedBox(
                  width: 90,
                  child: Align(
                    alignment: Alignment.centerRight,
                    child: TextFormField(
                      initialValue: initialValue,
                      textAlign: TextAlign.center,
                      inputFormatters: [FilteringTextInputFormatter.digitsOnly],
                      decoration: const InputDecoration(),
                    ),
                  ),
                ),
                Text(unit),
              ],
            ),
          ],
        ),
      ],
    );
  }
}

Answer 3

您可以使用其他答案中提到的间隔，也可以将行小部件属性mainAxisAlignment设置为MainAxisAlignment.end，如下所示：

Row(
 mainAxisAlignment: MainAxisAlignment.end;
 children: //rest of your code
);