Flutter 颤振：移动包含带有文本字段和键盘的TabBarView的底板
我试图制作一个底部表单，在两个选项卡视图（第二个和第一个）中都有一个文本字段。。但是，底板被键盘重叠 我尝试了这里提到的所有解决方案： 它只适用于选项卡（容器内脚手架内的选项卡），而不显示选项卡视图内容，我的意思是选项卡视图消失并仅显示白色屏幕 这里是我的屏幕在键盘apear之前和之后的图像： 之前： 之后： 代码：Flutter 颤振：移动包含带有文本字段和键盘的TabBarView的底板,flutter,dart,tabbar,tabview,flutter-showmodalbottomsheet,Flutter,Dart,Tabbar,Tabview,Flutter Showmodalbottomsheet,我试图制作一个底部表单，在两个选项卡视图（第二个和第一个）中都有一个文本字段。。但是，底板被键盘重叠 我尝试了这里提到的所有解决方案： 它只适用于选项卡（容器内脚手架内的选项卡），而不显示选项卡视图内容，我的意思是选项卡视图消失并仅显示白色屏幕 这里是我的屏幕在键盘apear之前和之后的图像： 之前： 之后： 代码： showModalBottomSheet( backgroundColor: Colors.transparent, context: context,
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
isScrollControlled: true,
builder: (context) {
return Padding(
padding: MediaQuery.of(context).viewInsets,
child: StatefulBuilder(builder:
(BuildContext context, StateSetter setState) {
return Container(
width: MediaQuery.of(context).size.width,
height: 282,
decoration: BoxDecoration(
// color: colorPrimary,
color: Colors.black,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18.0),
topRight: const Radius.circular(18.0),
),
),
child: DefaultTabController(
length: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 12),
child: Scaffold(
resizeToAvoidBottomInset: true,
appBar: TabBar(
tabs: [
Tab(
icon: Icon(
Icons.directions_car,
color: Colors.black,
)),
Tab(
icon: Icon(
Icons.directions_transit,
color: Colors.black,
)),
],
),
body: TabBarView(
controller: _controller,
children: <Widget>[
Column(
children: <Widget>[
Text(
'the first tab view',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 26),
Container(
height: 73,
width: MediaQuery.of(context).size.width -24,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: colorPrimary,
border: Border.all(width: 0.5,
color: Colors.redAccent)),
child: Align(
alignment:Alignment.center,
child: TextField(
maxLength: 30,
enableInteractiveSelection:false,
keyboardType: TextInputType.number,
style: TextStyle(height: 1.6),
cursorColor: Colors.green[800],
textAlign: TextAlign.center,
autofocus: false,
decoration:
InputDecoration(
border:InputBorder.none,
hintText:'Internet',
counterText: "",
),
),
)),
],
),
Column(
children: <Widget>[
Text(
'the second tab view',
style: TextStyle(fontSize: 24),
),
SizedBox(height: 26),
Container(
height: 73,
width: MediaQuery.of(context).size.width -24,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(5),
color: colorPrimary,
border: Border.all(width: 0.5,
color: Colors.redAccent)),
child: Align(
alignment:Alignment.center,
child: TextField(
maxLength: 30,
enableInteractiveSelection:false,
keyboardType: TextInputType.number,
style: TextStyle(height: 1.6),
cursorColor: Colors.green[800],
textAlign: TextAlign.center,
autofocus: false,
decoration:
InputDecoration(
border:InputBorder.none,
hintText:'Credit',
counterText: "",
),
),
)),
],
)
],
)),
),));}),);});
showModalBottomSheet(
背景颜色：颜色。透明，
上下文：上下文，
是的，
生成器：（上下文）{
返回填充(
填充：MediaQuery.of（context）.viewInsets，
子项：StatefulBuilder（生成器：
（BuildContext上下文，StateSetter设置状态）{
返回容器(
宽度：MediaQuery.of（context）.size.width，
身高：282，
装饰：盒子装饰(
//颜色：colorPrimary，
颜色：颜色，黑色，
borderRadius：仅限borderRadius(
左上：半径。圆形（18.0），
右上角：常数半径。圆形（18.0），
),
),
子级：DefaultTabController(
长度：2，
孩子：填充(
填充：const EdgeInsets.symmetric(
垂直：10，水平：12），
孩子：脚手架(
resizeToAvoidBottomInset:true，
appBar:TabBar(
选项卡：[
标签(
图标：图标(
图标、方向和汽车，
颜色：颜色，黑色，
)),
标签(
图标：图标(
图标。方向和交通工具，
颜色：颜色，黑色，
)),
],
),
正文：选项卡视图(
控制器：_控制器，
儿童：[
纵队(
儿童：[
正文(
“第一个选项卡视图”，
样式：TextStyle（字体大小：24），
),
尺寸箱（高度：26），
容器(
身高：73，
宽度：MediaQuery.of（context）.size.width-24，
装饰：盒子装饰(
边界半径：边界半径。圆形（5），
颜色：colorPrimary，
边框：边框。全部（宽度：0.5，
颜色：颜色。红色，
子对象：对齐(
对齐：对齐.center，
孩子：TextField(
最大长度：30，
enableInteractiveSelection:false，
键盘类型：TextInputType.number，
样式：TextStyle（高度：1.6），
光标颜色：颜色。绿色[800]，
textAlign:textAlign.center，
自动对焦：错误，
装饰：
输入装饰(
边框：InputBorder.none，
hintText:“互联网”，
反文本：“”，
),
),
)),
],
),
纵队(
儿童：[
正文(
“第二个选项卡视图”，
样式：TextStyle（字体大小：24），
),
尺寸箱（高度：26），
容器(
身高：73，
宽度：MediaQuery.of（context）.size.width-24，
装饰：盒子装饰(
边界半径：边界半径。圆形（5），
颜色：colorPrimary，
边框：边框。全部（宽度：0.5，
颜色：颜色。红色，
子对象：对齐(
对齐：对齐.center，
孩子：TextField(
最大长度：30，
enableInteractiveSelection:false，
键盘类型：TextInputType.number，
样式：TextStyle（高度：1.6），
光标颜色：颜色。绿色[800]，
textAlign:textAlign.center，
自动对焦：错误，
装饰：
输入装饰(
边框：InputBorder.none，
hintText:“信贷”，
反文本：“”，
),
),
)),
],
)
],
)),
),));}),);});
所以！有人曾经面对过这个问题，或者有什么想法可以帮助你？！谢谢。您可以复制粘贴运行下面的完整代码
步骤1：您可以使用
SingleChildScrollViewbuilder: (context) {
return SingleChildScrollView(
child: Padding(
脚手架appbar主体柱 child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
TabBar(
...
Expanded(
child: TabBarView(
child:Column(
主轴对准：
main.center，
横轴对齐：
CrossAxisAlignment.start，
儿童：[
塔巴(
...
扩大(
子项：选项卡视图(
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
@override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage>
with SingleTickerProviderStateMixin {
int _counter = 0;
Color colorPrimary = Colors.blue;
TabController _controller;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void initState() {
super.initState();
// 添加监听器
_controller = TabController(vsync: this, length: 2);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
child: const Text('showModalBottomSheet'),
onPressed: () {
showModalBottomSheet(
backgroundColor: Colors.transparent,
context: context,
isScrollControlled: true,
builder: (context) {
return SingleChildScrollView(
child: Padding(
padding: MediaQuery.of(context).viewInsets,
child: StatefulBuilder(builder:
(BuildContext context, StateSetter setState) {
return Container(
width: MediaQuery.of(context).size.width,
height: 282,
decoration: BoxDecoration(
// color: colorPrimary,
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(18.0),
topRight: const Radius.circular(18.0),
),
),
child: DefaultTabController(
length: 2,
child: Padding(
padding: const EdgeInsets.symmetric(
vertical: 10, horizontal: 12),
child: Column(
mainAxisAlignment:
MainAxisAlignment.center,
crossAxisAlignment:
CrossAxisAlignment.start,
children: <Widget>[
TabBar(
tabs: [
Tab(
icon: Icon(
Icons.directions_car,
color: Colors.black,
)),
Tab(
icon: Icon(
Icons.directions_transit,
color: Colors.black,
)),
],
),
Expanded(
child: TabBarView(
controller: _controller,
children: <Widget>[
Column(
children: <Widget>[
Text(
'the first tab view',
style: TextStyle(
fontSize: 24),
),
SizedBox(height: 26),
Container(
height: 73,
width: MediaQuery.of(
context)
.size
.width -
24,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(
5),
color:
colorPrimary,
border: Border.all(
width: 0.5,
color: Colors
.redAccent)),
child: Align(
alignment: Alignment
.center,
child: TextField(
maxLength: 30,
enableInteractiveSelection:
false,
keyboardType:
TextInputType
.number,
style: TextStyle(
height: 1.6),
cursorColor:
Colors.green[
800],
textAlign:
TextAlign
.center,
autofocus: false,
decoration:
InputDecoration(
border:
InputBorder
.none,
hintText:
'Internet',
counterText: "",
),
),
)),
],
),
Column(
children: <Widget>[
Text(
'the second tab view',
style: TextStyle(
fontSize: 24),
),
SizedBox(height: 26),
Container(
height: 73,
width: MediaQuery.of(
context)
.size
.width -
24,
decoration: BoxDecoration(
borderRadius:
BorderRadius
.circular(
5),
color:
colorPrimary,
border: Border.all(
width: 0.5,
color: Colors
.redAccent)),
child: Align(
alignment: Alignment
.center,
child: TextField(
maxLength: 30,
enableInteractiveSelection:
false,
keyboardType:
TextInputType
.number,
style: TextStyle(
height: 1.6),
cursorColor:
Colors.green[
800],
textAlign:
TextAlign
.center,
autofocus: false,
decoration:
InputDecoration(
border:
InputBorder
.none,
hintText:
'Credit',
counterText: "",
),
),
)),
],
)
],
),
)
]),
),
));
}),
),
);
});
}),
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
导入“包装：颤振/材料.省道”；
void main（）{
runApp（MyApp（））；
}
类MyApp扩展了无状态小部件{
@凌驾
小部件构建（构建上下文）{
返回材料PP(
标题：“颤振演示”，
主题：主题数据(
主样本：颜色。蓝色，
视觉密度：视觉密度。自适应平台密度，
),
主页：MyHomePage（标题：“颤振演示主页”），
);
}
}
类MyHomePage扩展StatefulWidget{
MyHomePage（{Key，this.title}）：超级（Key:Key）；
最后的字符串标题；
@凌驾
_MyHomePageState createState（）=>\u MyHomePageState（）；
}
类_MyHomePageState扩展状态
使用SingleTickerProviderStateMixin{
int _计数器=0；
Color colorPrimary=Colors.blue；
TabController\u控制器；
void _incrementCounter（）{
设置状态（）{
_计数器++；
});
}
void initState（）{
super.initState（）；
// 添加监听器
_controller=TabController（vsync:this，长度：2）；
}
@凌驾
小部件构建（构建上下文）{
返回脚手架(
appBar:appBar(
标题：文本（widget.title），
),
正文：中(
子：列(
mainAxisAlignment:mainAxisAlignment.center，
儿童：[
升起的按钮(
showModalBottomSheet(
builder: (context){
return Scaffold(
backgroundColor: Colors.transparent,
resizeToAvoidBottomInset: true,
body: //your child