我有一个带有一些 TextFormField 的表单，我想扩展最后一个 TextFormField 以占据屏幕的其余部分。最后一个 TextFormField 可以有多行文本。

我没能做到这一点，并尝试了 SizedBox.expand() Và Expanded 小部件，但没有成功。

下面是当前代码:

nhập 'gói:flutter/material.dart';

void main() => runApp(MyApp());

lớp MyApp mở rộng StatelessWidget {
  // Tiện ích này là gốc của ứng dụng của bạn.
  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    trả về MaterialApp(
      tiêu đề: 'Bản demo Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

lớp MyHomePage mở rộng StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @ghi đè
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final GlobalKey _formKey = GlobalKey();

  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    trả về Giàn giáo(
      appBar: Thanh ứng dụng(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          trẻ em: [
            Chữ(
              "What is this new classroom?"
            ),
            SizedBox(height: 8.0,),
            Expanded(
              child: Form(
              key: _formKey,
              child: ListView(
                padding: EdgeInsets.all(8.0),
                trẻ em: [
                  Thùng chứa(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: TextFormField(
                      trang trí: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Classroom Name",
                        hintText: "What's name of the new classroom?",
                      ),
                    )
                  ),
                  SizedBox(height: 8.0,),
                  Thùng chứa(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: TextFormField(
                      trang trí: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Description",
                        hintText: "Description of the new classroom",
                      ),
                      //maxLines: 5,
                    ),
                  ),
                ]
              ),
            ),
          ),
        ],
      ),
    ),
    );
  }
}

câu trả lời hay nhất

我稍微编辑了你的代码。但是没用。请引用以下代码。我将尝试在代码下方解释我的理解。

nhập 'gói:flutter/material.dart';

void main() => runApp(MyApp());

lớp MyApp mở rộng StatelessWidget {
  // Tiện ích này là gốc của ứng dụng của bạn.
  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    trả về MaterialApp(
      tiêu đề: 'Bản demo Flutter',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

lớp MyHomePage mở rộng StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @ghi đè
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State {
  final GlobalKey _formKey = GlobalKey();

  @ghi đè
  Xây dựng tiện ích (BuildContext context) {
    trả về Giàn giáo(
      appBar: Thanh ứng dụng(
        title: Text(widget.title),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          trẻ em: [
            Text("What is this new classroom?"),
            SizedBox(
              height: 8.0,
            ),
            Expanded(
                child: Form(
              key: _formKey,
              child: Column(children: [
                Thùng chứa(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: TextFormField(
                      trang trí: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Classroom Name",
                        hintText: "What's name of the new classroom?",
                      ),
                    )),
                SizedBox(
                  height: 8.0,
                ),
                Expanded(
                  con: Container(
                    padding: EdgeInsets.symmetric(vertical: 8.0),
                    child: TextFormField(
                      maxLines: null,
                      trang trí: InputDecoration(
                        border: OutlineInputBorder(),
                        labelText: "Description",
                        hintText: "Description of the new classroom",
                      ),
                    ),
                  ),
                ),
              ]),
            )),
          ],
        ),
      ),
    );
  }
}

我用你的代码检查了 View 。位于 TextFormField nội bộ TextField 没有占据屏幕的其余部分。所以我编辑了 TextField 来显示屏幕的其余部分。上面的代码就是这样做的。查看检查 View

但是有 InputDecorator(它是我们的 TextField 的子级)绘制边界线。在我们的例子中，它根据内容绘制边界线。

可能的解决方法是:

1. maxLines = null 这会将 TextField 作为内容组增长。但初始 View 将是一行。
2. 给出固定的 maxLines(如 10 或 20)，这看起来可能会占据屏幕。但它不是动态的(不会根据屏幕尺寸/屏幕方向而改变)

关于Flutter 展开/占用 TextFormField 以填充屏幕的其余部分，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53027772/