英文:
How do I compose these widgets to get this row to display correctly?
问题
我正在处理一个表单，尝试在屏幕上布置组件。要收集的每个数据均由位于空的轮廓表单字段上方的左对齐标签表示。这些都位于一个列内，位于一个单一的单一子滚动视图内，位于一个安全区内。
我有一对数据点，我想将它们放在一行上，左侧项目是位于部分宽度表单字段上方的左对齐标签，右侧项目是右对齐开关，其左侧有一个标签。
我可以使所有组件都显示在一行上，但我无法使左对齐的标签起作用，无法使标签/开关组合垂直对齐到文本字段的中心，并且无法使标签/开关组合右对齐。下面的图像是我卡住的地方；这是让我到达那里的代码。
我在这里缺少什么？我感觉这是一些简单的东西，但我似乎无法弄清楚。
英文:
I am working on a form and trying to lay out the components on-screen. Each piece of data to be collected is represented by a left-aligned label above an empty, outlined form field. These are all inside a column, inside a singlechildscrollview, inside a safearea.
I have one pair of data points I'd like to put on a single row, such that the left item is a left-aligned label above a partial-width form field, and the right item is a right-aligned switch with a label to the left.
I can get all the components to appear on a single row, but I can't get the left-aligned label to work, I can't get the label/switch combo to vertically align to the center of the textfield, and I can't get the label/switch combo to be right-aligned. The image below is where I'm stuck; here's the code that got me there.
What am I missing here? I feel like it's something simple but I can't seem to figure it out.
//* AMOUNT & DEPOSIT
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text('Amount'.hardcoded, style: labelStyle),
vgap(5),
TextFormField(
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
autofocus: true,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(16, 4, 0, 4),
border: OutlineInputBorder(
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
],
),
),
Expanded(
child: Row(
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text('Deposit'.hardcoded, style: labelStyle),
hgap(5),
Switch.adaptive(
value: isDeposit,
onChanged: (value) =>
setState(() => isDeposit = value),
),
],
),
),
],
),
答案1
得分: 1
这是你要翻译的部分：
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Amount',style: Theme.of(context).textTheme.titleMedium,),
Row(
children: [
Expanded(
child: TextFormField(
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
autofocus: true,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(16, 4, 0, 4),
border: OutlineInputBorder(
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
const SizedBox(width: 20,),
Text('Deposit',style: Theme.of(context).textTheme.titleMedium,),
const SizedBox(width: 5,),
Switch.adaptive(
value: true,
onChanged: (value){},
),
],
),
],
)
请注意，我已经将其中的HTML实体字符（如'''）还原为正常的单引号。
英文:
is this what you trying to do?
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Amount',style: Theme.of(context).textTheme.titleMedium,),
Row(
children: [
Expanded(
child: TextFormField(
keyboardType: const TextInputType.numberWithOptions(
decimal: true),
autofocus: true,
decoration: const InputDecoration(
contentPadding: EdgeInsets.fromLTRB(16, 4, 0, 4),
border: OutlineInputBorder(
borderSide: BorderSide(),
),
focusedBorder: OutlineInputBorder(
borderSide: BorderSide(
color: Colors.black,
),
),
),
style: const TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black38,
),
),
),
const SizedBox(width: 20,),
Text('Deposit',style: Theme.of(context).textTheme.titleMedium,),
const SizedBox(width: 5,),
Switch.adaptive(
value: true,
onChanged: (value){},
),
],
),
],
),
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论