#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
);