Текстовое поле с правой стороны

#flutter #dart

Вопрос:

 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),
              ],
            ),
          ],
        ),
      ],
    );
  }
}
 

Я знаю, что это не так уж сложно сделать, но я застрял на этом уже некоторое время. Есть ли способ создать текстовое поле и текст(единица измерения) в правой части экрана? я попытался использовать отступы, но они не совпадали друг с другом, и на разных экранах это выглядело бы так странно.Это так просто, но я не могу понять

Ответ №1:

Вы можете просто использовать Spacer в Row виджете. Что 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),
              ],
            ),
          ],
        ),
      ],
    );
  }
}
 

Ответ №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),
              ],
            ),
          ],
        ),
      ],
    );
  }
}
 

Комментарии:

1. есть ли способ сделать их встроенными друг в друга, потому что на экране они разные из-за того, что тип текста отличается размерами текста ?

2. Попробуйте установить crossAxisAlignment: CrossAxisAlignment.center или CrossAxisAlignment.start для вашей первой строки

Ответ №3:

Вы можете использовать разделитель, как указано в других ответах, а также можете установить для свойства виджета строки mainAxisAlignment значение MainAxisAlignment.end, как показано ниже:

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