如何在textformfield上方制作文本？答案

【问题标题】：How to make the text above the textformfield?如何在textformfield上方制作文本？
【发布时间】：2022-07-31 17:55:56
【问题描述】：

这就是我想做的设计

这是我目前的设计

我是新来的颤振。我的问题是如何在 textformfield 上方制作文本。我在互联网上搜索并尝试这样做，但仍然没有成功。我不知道还能去哪里解决我的问题。我希望溢出愿意帮助我。

这是我的代码：

Container(
                        width: double.infinity,
                        margin: EdgeInsets.fromLTRB(10, 0, 10, 10),
                        padding: EdgeInsets.all(15),
                        decoration: BoxDecoration(
                          border: Border.all(
                            color: Colors.transparent,
                            width: 1.0,
                          ),
                        ),
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              children: [
                                SizedBox(
                                  height: 100,
                                  width: 100,
                                  child: Text('First Name'),
                                ),
                                SizedBox(
                                  width: 200,
                                  child: TextFormField(
                                    style: TextStyle(color: Colors.black),
                                    controller: firstName,
                                    onSaved: (String? value) {
                                      firstName.text = value!;
                                    },
                                    decoration: InputDecoration(
                                      border: OutlineInputBorder(),
                                      hintText: 'First Name',
                                      hintStyle: TextStyle(
                                          color: Colors.black, fontSize: 16),
                                    ),
                                  ),
                                ),
                              ],
                            )
                          ],
                        ),
                      )

【问题讨论】：

标签： flutter dart flutter-layout

【解决方案1】：

您的问题是由于错误的小部件放置而发生的。请注意，您在 Column 中有 Row，但您并没有真正使用 Column 的子项来垂直放置“First Name”文本小部件。此外，该行目前基本上是多余的。您可以制作我刚刚在下面分享的一排列，以实现您想要的 UI。尝试玩它:)

child: Column(
  crossAxisAlignment: CrossAxisAlignment.start,
  mainAxisAlignment: MainAxisAlignment.start,
  children: [
    const SizedBox(
      height: 20,
      width: 100,
      child: Text('First Name'),
    ),
    SizedBox(
      width: 150,
      child: TextFormField(
        style: const TextStyle(color: Colors.black),
        decoration: const InputDecoration(
          border: OutlineInputBorder(),
          hintText: 'First Name',
          hintStyle: TextStyle(color: Colors.black, fontSize: 16),
        ),
      ),
    )
  ],
),

【讨论】：

【解决方案2】：

要创建您想要的 TextField，您只需要使用这样的 Column：

Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text('First Name', style: TextStyle(fontWeight: FontWeight.bold),),
          SizedBox(
            width: 200,
            child: TextFormField(
              style: TextStyle(color: Colors.black),
              onSaved: (String? value) {
                // firstName.text = value!;
              },
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'First Name',
                hintStyle: TextStyle(color: Colors.black, fontSize: 16),
              ),
            ),
          )
        ],
      )

结果是：

【讨论】：

【解决方案3】：

200px 太大了，结构我更喜欢

Row
 -Expanded
   - Column (CrossAxisAlignment.startMainAxisSize.min,)
     - Text
     - TextFormField
  -Expanded
   - Column (CrossAxisAlignment.startMainAxisSize.min,)
     - Text
     - TextFormField
  -Expanded
   - Column (CrossAxisAlignment.startMainAxisSize.min,)
     - Text
     - TextFormField

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Container(
            padding: EdgeInsets.all(15),
            decoration: BoxDecoration(
              border: Border.all(
                color: Colors.transparent,
                width: 1.0,
              ),
            ),
            child: Row(
              children: [
                filed(),
                filed(),
                filed(),
              ],
            ),
          )
        ],
      ),
    );
  }

  Expanded filed() {
    return Expanded(
      child: Padding(
        padding: EdgeInsets.all(8),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Padding(
              padding: EdgeInsets.only(bottom: 20),
              child: Text('First Name'),
            ),
            TextFormField(
              style: TextStyle(color: Colors.black),
              onSaved: (String? value) {},
              decoration: InputDecoration(
                border: OutlineInputBorder(),
                hintText: 'First Name',
                hintStyle: TextStyle(color: Colors.black, fontSize: 16),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

【讨论】：