弹出键盘时将包含小部件的 TextField 移动到可查看区域，而不管底部的另一个小部件
Move TextField containing widget to view-able area when keyboard pop up regardless of another widget in the bottom
我想要实现的是在键盘弹出时将我的 TextField 移动到可查看区域，我还想要一个底部居中对齐的小部件（文本小部件）保留在那里并被键盘隐藏。
我的代码：
@override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Container(
child: Stack(children: <Widget>[
//SingleChildScrollView widget tried here, result was a failure
Container(
margin: EdgeInsets.only(bottom: 100.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
))
]));
}));
}
目前我的 TextField 包含小部件位于 stack 小部件 下的 container 中并且对齐按 列小部件 属性居中。
我尝试了什么：
我在这里提到了一些问题，并在我的堆栈下尝试了 SingleChildScrollView 小部件，结果是 SingleChildScrollView 小部件[=下的 container 29=] 失去其列轴属性并与主体顶部对齐。
我没有尝试解决我的问题是使用动画向上移动小部件。如果没有任何其他方法，我会去做，因为我必须了解那些仍然存在的小部件。 ;')
我在堆栈下为所有小部件制作了 SingleChildScrollView 小部件，但底部 wText 小部件除外，我不想在弹出键盘时看到它。然后当键盘出现在屏幕上时，我只是使用 flutter 的 Visibility 小部件隐藏我的 Text 小部件。这完全解决了我的问题（我使用 keyboard_visibility: ^0.5.5 库来获取键盘信息，它告诉我何时在底部隐藏或显示我的文本小部件）。
供参考我未排序的整个代码：
bool _visible = true;
@override
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool keyvisible) {
//print('keyboard $visible');
setState(() {
_visible = !keyvisible;
});
},
);
}
@override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
//resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Center(
child: Stack(children: <Widget>[
SingleChildScrollView(
padding: EdgeInsets.all(8.0),
//margin: EdgeInsets.only(bottom: 100.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200.0,
),
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
textInputAction: TextInputAction.search,
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Visibility(
visible: _visible,
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: ' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
TextSpan(text: '\t v', style: TextStyle(color: Colors.white70, fontSize: 10.0, fontWeight: FontWeight.bold)),
TextSpan(text: '0.02.05', style: TextStyle(color: Colors.white70, fontSize: 11.0, fontStyle: FontStyle.italic))
])),
),
))
]));
}));
}
我想要实现的是在键盘弹出时将我的 TextField 移动到可查看区域，我还想要一个底部居中对齐的小部件（文本小部件）保留在那里并被键盘隐藏。
我的代码：
@override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Container(
child: Stack(children: <Widget>[
//SingleChildScrollView widget tried here, result was a failure
Container(
margin: EdgeInsets.only(bottom: 100.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Text(' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
))
]));
}));
}
目前我的 TextField 包含小部件位于 stack 小部件 下的 container 中并且对齐按 列小部件 属性居中。
我尝试了什么： 我在这里提到了一些问题，并在我的堆栈下尝试了 SingleChildScrollView 小部件，结果是 SingleChildScrollView 小部件[=下的 container 29=] 失去其列轴属性并与主体顶部对齐。
我没有尝试解决我的问题是使用动画向上移动小部件。如果没有任何其他方法，我会去做，因为我必须了解那些仍然存在的小部件。 ;')
我在堆栈下为所有小部件制作了 SingleChildScrollView 小部件，但底部 wText 小部件除外，我不想在弹出键盘时看到它。然后当键盘出现在屏幕上时，我只是使用 flutter 的 Visibility 小部件隐藏我的 Text 小部件。这完全解决了我的问题（我使用 keyboard_visibility: ^0.5.5 库来获取键盘信息，它告诉我何时在底部隐藏或显示我的文本小部件）。
供参考我未排序的整个代码：
bool _visible = true;
@override
void initState() {
super.initState();
KeyboardVisibilityNotification().addNewListener(
onChange: (bool keyvisible) {
//print('keyboard $visible');
setState(() {
_visible = !keyvisible;
});
},
);
}
@override
Widget build(BuildContext context) {
//databaseHelper.initializeDatabase();
return Scaffold(
//resizeToAvoidBottomPadding: false,
appBar: AppBar(
title: Text('BOM'),
),
body: Builder(builder: (BuildContext context) {
return Center(
child: Stack(children: <Widget>[
SingleChildScrollView(
padding: EdgeInsets.all(8.0),
//margin: EdgeInsets.only(bottom: 100.0),
child: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
SizedBox(
height: 200.0,
),
Container(
margin: EdgeInsets.only(bottom: 50.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
GestureDetector(
onTap: () {
setState(() {
selection = '5-co';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-co'
? Colors.green
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'COMPONENTS',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
),
Container(
width: 30.0,
),
GestureDetector(
onTap: () {
setState(() {
selection = '5-nl';
});
},
child: Container(
width: 130.0,
padding: EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: selection == '5-nl'
? Colors.blue
: Colors.black45,
borderRadius:
BorderRadius.all(Radius.circular(5.0))),
child: Center(
child: Text(
'REXIN',
style: TextStyle(
color: Colors.white,
fontSize: 13.0,
fontWeight: FontWeight.bold),
)),
),
)
],
),
),
// SizedBox(height: 50,),
Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20.0),
child: TextField(
textInputAction: TextInputAction.search,
controller: controller,
decoration: InputDecoration(
labelText: 'Enter article:',
hintText: 'eg: 3290-BR',
prefixIcon: Icon(Icons.local_offer),
suffixIcon: IconButton(
icon: Icon(Icons.search),
onPressed: () {
//if (value.length >= 4) {
navigateToList(controller.text, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
//
}),
/*enabledBorder:
OutlineInputBorder(borderRadius: BorderRadius.circular(8.0), borderSide: BorderSide(color: Colors.green)),*/
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(8.0)),
),
onSubmitted: (value) {
//if (value.length >= 4) {
navigateToList(value, selection);
// } else
// Scaffold.of(context).showSnackBar(SnackBar(
// content:
// Text('Oops, please give me more details !')));
},
),
),
]),
),
),
Align(
alignment: Alignment.bottomCenter,
child: Padding(
padding: const EdgeInsets.all(10.0),
child: Visibility(
visible: _visible,
child: RichText(
text: TextSpan(children: <TextSpan>[
TextSpan(
text: ' P A N D U',
style: TextStyle(
color: Colors.green,
fontSize: 30.0,
fontWeight: FontWeight.bold)),
TextSpan(text: '\t v', style: TextStyle(color: Colors.white70, fontSize: 10.0, fontWeight: FontWeight.bold)),
TextSpan(text: '0.02.05', style: TextStyle(color: Colors.white70, fontSize: 11.0, fontStyle: FontStyle.italic))
])),
),
))
]));
}));
}