如何在 flutter 中并排放置两个文本表单字段

Question

我正在尝试在 flutter 中创建一个表单。我想在其中并排放置两个文本字段，如下所示：

我想将部门和 学习年份 字段放在同一行中，如图所示。我做不到。我已经使用 Row 小部件进行了尝试，如下所示：

        Row(
            children: <Widget>[
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
                    child: Text(
                      "Department",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                        fontFamily: "Poppins",
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius:
                              BorderRadius.all(Radius.circular(8))),
                    ),
                  ),
                ],
              ),
              Column(
                children: [
                  const Padding(
                    padding: EdgeInsets.fromLTRB(0, 0, 0, 5),
                    child: Text(
                      "Year of Study",
                      style: TextStyle(
                        color: Colors.black,
                        fontSize: 16,
                        fontFamily: "Poppins",
                        fontWeight: FontWeight.w700,
                      ),
                    ),
                  ),
                  TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius:
                              BorderRadius.all(Radius.circular(8))),
                    ),
                  ),
                ],
              ),

但是，它给我错误。在搜索 google 时，我想到了将 TextFormField 包装在 Flexible() 小部件中的想法，但这对我也没有用，并给了我不同类型的错误。我也试过在 Expanded() 中换行，但错误仍然存在。

Answer 1

根据上面的图片显示尝试下面的代码。

 Column(
        children: [
          ListTile(
            title: Text('Full Name'),
            subtitle: TextFormField(
              decoration: const InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.all(Radius.circular(8))),
                hintText: 'Full Name',
              ),
            ),
          ),
          SizedBox(
            height: 5,
          ),
          Row(
            children: [
              Expanded(
                child: ListTile(
            title: Text('Department'),
            subtitle: TextFormField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    hintText: '  Department',
                  ),
                ),),
              ),
              SizedBox(
                width: 5,
              ),
              Expanded(
                child:ListTile(
            title: Text('Year Of Study'),
            subtitle:  TextFormField(
                  decoration: const InputDecoration(
                    border: OutlineInputBorder(
                        borderRadius: BorderRadius.all(Radius.circular(8))),
                    hintText: '  Year Of Study',
                  ),
                ),),
              ),
            ],
          )
        ],
      ),

结果屏幕->

Answer 2

将它们中的每一个包裹在大小合适的盒中，并给它们一个固定的宽度。问题是因为 Rows 和 TextFormFields 无限扩展。当将 textformfield 放在一行中时，您会收到 renderflex 错误。一个大小的盒子可以通过给它一个有限的宽度来解决这个问题。

Answer 3

您可以将子项包装到扩展小部件中：

Row(
      children: [
        Expanded(
          flex: 3,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(
                padding: EdgeInsets.fromLTRB(10, 0, 0, 5),
                child: Text(
                  "Department",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8))),
                ),
              ),
            ],
          ),
        ),
        SizedBox(width: 8),
        Expanded(
          flex: 2,
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const Padding(
                padding: EdgeInsets.fromLTRB(10, 0, 0, 5),
                child: Text(
                  "Year of Study",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontFamily: "Poppins",
                    fontWeight: FontWeight.w700,
                  ),
                ),
              ),
              TextFormField(
                decoration: const InputDecoration(
                  border: OutlineInputBorder(
                      borderRadius: BorderRadius.all(Radius.circular(8))),
                ),
              ),
            ],
          ),
        ),
      ],
    ),

我还在两者之间添加了一个 SizedBox，flex 属性 为文本字段和crossAxisAlignment：CrossAxisAlignment.start 使文本位于左侧。

如何在 flutter 中并排放置两个文本表单字段

How to Place two Text Form Fields side by side in flutter

forms

dart

flutter