如何在TabBarView中用Column布局多个TextField？

问题根源在于TabBarView的children列表里每个元素对应一个独立标签页，你现在把两个TextField分别作为children的两个元素，自然会被分配到两个标签页。要让它们同页显示，只需把两个TextField的外层Padding用Column组件包裹，作为children列表的单个元素即可。

修改后的代码如下：

body: TabBarView(
  children: [
    // 用Column包裹两个TextField，作为单个标签页的内容
    Column(
      children: [
        Padding(
          padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
          child: TextField(
            controller: nota1Controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: "Nota 1",
              hintStyle: TextStyle(color: Colors.green),
              filled: true,
              fillColor: Colors.green.shade50,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide.none,
              ),
            ),
            textAlign: TextAlign.left,
            style: TextStyle(color: Colors.green, fontSize: 20.0),
          ),
        ),
        Padding(
          padding: EdgeInsets.fromLTRB(100.0, 50, 100.0, 1),
          child: TextField(
            controller: nota2Controller,
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              hintText: "Nota 2",
              hintStyle: TextStyle(color: Colors.green),
              filled: true,
              fillColor: Colors.green.shade50,
              border: OutlineInputBorder(
                borderRadius: BorderRadius.circular(10),
                borderSide: BorderSide.none,
              ),
            ),
            textAlign: TextAlign.left,
            style: TextStyle(color: Colors.green, fontSize: 20.0),
          ),
        ),
      ],
    ),
    // 若需其他标签页，继续在此添加对应widget即可
  ],
)

补充说明： #

• Column组件会让子元素垂直排列，刚好满足两个TextField上下布局的需求
• 现在TabBarView的children列表第一个元素是包含两个TextField的Column，因此这两个输入框会显示在同一个标签页内

内容的提问来源于stack exchange，提问作者Davi Castaldini