如何在顫動中并排放置兩個文本表單欄位

我正在嘗試在顫振中創建一個表單。我想將兩個文本欄位并排放置，如下所示：

我想將部門和學習年份欄位放在同一行，如圖所示。我做不到。我已經嘗試過使用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))),
                    ),
                  ),
                ],
              ),

但是，它給了我錯誤。在搜索谷歌時，我有一些想法可以包含TextFormField在Flexible()小部件中，但這對我也不起作用，并且給了我不同型別的錯誤。我也嘗試過換行，Expanded()但錯誤仍然存??在。

uj5u.com熱心網友回復：

根據上面的影像顯示嘗試下面的代碼。

 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',
                  ),
                ),),
              ),
            ],
          )
        ],
      ),

結果螢屏->

uj5u.com熱心網友回復：

將它們中的每一個都包裹在大小合適的盒中，并給它們一個固定的寬度。問題是因為 Rows 和 TextFormFields 無限擴展。并且當將 textformfield 放入一行時，您會得到一個 renderflex 錯誤。一個大小合適的盒子可以通過給它一個有限的寬度來解決這個問題。

uj5u.com熱心網友回復：

您可以將孩子包裝到擴展小部件中：

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則將文本放在左側。

標籤：扑 形式 镖

上一篇：如何在選擇輸入中設定選項的樣式

下一篇：使用JavaScript在頁面上顯示表單輸入