如何让我的文本字段填充可用的垂直 space?
How can I make my textfield fill the available vertical space?
我有以下小部件
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Playground',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 100,
color: Colors.black,
child: const ResponsiveInput(),
),
),
);
}
}
class ResponsiveInput extends StatelessWidget {
const ResponsiveInput({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
fillColor: Colors.white,
filled: true,
),
),
),
TextButton(
onPressed: () => false,
child: const Text('Send'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.orange)),
)
],
);
}
}
下面是哪个
[![在此处输入图片描述][1]][1]
但是如何让文本字段填充黑色容器中剩余的 space?
我尝试使用内容填充,但如果容器具有响应高度,文本将被截断。即使使用密集。
您可以在 TextFormField
上使用 expands: true, maxLines: null,
expands If set to true and wrapped in a parent widget like Expanded or SizedBox, the input will expand to fill the parent.
Expanded(
child: TextFormField(
expands: true,
maxLines: null,
decoration: const InputDecoration(
fillColor: Colors.white,
filled: true,
),
),
),
更多关于expands
我有以下小部件
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Playground',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.green,
body: Align(
alignment: Alignment.bottomCenter,
child: Container(
height: 100,
color: Colors.black,
child: const ResponsiveInput(),
),
),
);
}
}
class ResponsiveInput extends StatelessWidget {
const ResponsiveInput({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Row(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Expanded(
child: TextFormField(
decoration: const InputDecoration(
fillColor: Colors.white,
filled: true,
),
),
),
TextButton(
onPressed: () => false,
child: const Text('Send'),
style: ButtonStyle(
backgroundColor: MaterialStateProperty.all(Colors.orange)),
)
],
);
}
}
下面是哪个
[![在此处输入图片描述][1]][1]
但是如何让文本字段填充黑色容器中剩余的 space?
我尝试使用内容填充,但如果容器具有响应高度,文本将被截断。即使使用密集。
您可以在 TextFormField
expands: true, maxLines: null,
expands If set to true and wrapped in a parent widget like Expanded or SizedBox, the input will expand to fill the parent.
Expanded(
child: TextFormField(
expands: true,
maxLines: null,
decoration: const InputDecoration(
fillColor: Colors.white,
filled: true,
),
),
),
更多关于expands