正常情况下，我们使用 TextField/TextFormField 的时候，都是单行的表单或者指定行数的情况。但是有时候，我们希望能自适应父容器的高度，或者高度动态自适应变化。
那么我们应该怎么操作呢？
以下面的代码为例子：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("What is this new classroom?"),
const SizedBox(
height: 8.0,
),
Expanded(
child: Form(
key: _formKey,
child: ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Classroom Name",
hintText: "What's name of the new classroom?",
),
)),
const SizedBox(
height: 8.0,
),
Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Description",
hintText: "Description of the new classroom",
),
//maxLines: 5,
),
),
]),
),
),
],
),
),
);
}
}
实际显示效果如下图：
为了达到我们的目的，我们需要使用 Expanded 进行包裹，并且设置 TextField/TextFormField 的如下几个属性：
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
keyboardType: TextInputType.multiline,
)));
上述例子修改后的完整代码如下：
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
const MyHomePage({super.key, required this.title});
final String title;
@override
State<MyHomePage> createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
const Text("What is this new classroom?"),
const SizedBox(
height: 8.0,
),
Expanded(
child: Form(
key: _formKey,
child: ListView(
padding: const EdgeInsets.all(8.0),
children: <Widget>[
Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Classroom Name",
hintText: "What's name of the new classroom?",
),
)),
const SizedBox(
height: 8.0,
),
Expanded(
child: Container(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: TextFormField(
decoration: const InputDecoration(
border: OutlineInputBorder(),
labelText: "Description",
hintText: "Description of the new classroom",
),
maxLines: null,
expands: true,
textAlignVertical: TextAlignVertical.top,
keyboardType: TextInputType.multiline,
),
)),
]),
),
),
],
),
),
);
}
}
修改后的的效果如下：
