我有一個允許用戶輸入多行的文本欄位小部件，但在輸入幾行后，出現溢位錯誤，如下所示。
This happened because whenever there is new line, the textfield height increases and pushed down the keyboard. This is before entering new line.
I used resizeToAvoidBottomInset: false, to solve the problem where keyboard covers textfield but this doesn't seem to solve the problem above.
Is there any way I can push the textfield up after entering new line as shown below so that the keyboard the textfield won't overflow the keyboard?
This is my code
import 'dart:async';
import 'package:flutter/material.dart';
class Detail extends StatefulWidget {
const Detail({Key? key}) : super(key: key);
@override
State<Detail> createState() => _DetailState();
}
class _DetailState extends State<Detail> {
final ScrollController scrollCtrl = ScrollController();
bool isScrolled = false;
bool isLoading = false;
@override
void initState() {
super.initState();
}
@override
Widget build(BuildContext context) {
final bottom = MediaQuery.of(context).viewInsets.bottom;
AppBar appbar = AppBar(
backgroundColor: Colors.transparent,
title: const Text('Approval Detail'),
);
WidgetsBinding.instance!.addPostFrameCallback((timeStamp) {
scrollCtrl.addListener(() {});
scrollCtrl.position.isScrollingNotifier.addListener(() {
if (!scrollCtrl.position.isScrollingNotifier.value) {
setState(() {
isScrolled = false;
});
} else {
setState(() {
isScrolled = true;
});
}
});
});
return Container(
height: MediaQuery.of(context).size.height,
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage('images/bg_home.png'),
fit: BoxFit.fill,
),
),
child: Scaffold(
resizeToAvoidBottomInset: false,
// resizeToAvoidBottomPadding: false,
backgroundColor: Colors.transparent,
appBar: appbar,
body: Stack(
children: [
SingleChildScrollView(
controller: scrollCtrl,
reverse: true,
child: Padding(
padding: EdgeInsets.only(bottom: bottom),
child: Column(
children: [
Padding(
padding: const EdgeInsets.only(bottom: 200),
child: Text("Detail")),
Container(
height: 25,
color: columnColor,
),
],
),
),
),
IndexedStack(
index: isScrolled
? 0
: 1, // switch between Foo and Bar based on condition
children: [
Container(),
Positioned(
child: Padding(
padding: EdgeInsets.only(
bottom: MediaQuery.of(context).viewInsets.bottom),
child: Align(
alignment: Alignment.bottomCenter, child: BottomWidget()),
)),
],
)
],
),
),
);
}
}
This is my BottomWidget
import 'package:flutter/material.dart';
class BottomWidget extends StatefulWidget {
BottomWidget({
Key? key,
}) : super(key: key);
@override
State<BottomWidget> createState() => _BottomWidgetState();
}
class _BottomWidgetState extends State<BottomWidget> {
@override
Widget build(BuildContext context) {
return Container(
height: 180,
width: double.maxFinite,
decoration: BoxDecoration(
boxShadow: [
BoxShadow(
color: Colors.grey[300]!,
offset: const Offset(0.0, 2.5),
blurRadius: 1.0,
),
const BoxShadow(
color: Colors.black12,
offset: Offset(0.0, 0.0),
blurRadius: 1.0,
),
],
color: Colors.white,
borderRadius:
const BorderRadius.vertical(top: Radius.circular(20.0))),
child: Column(
children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 15, 10, 0),
child: SizedBox(
width: double.maxFinite,
// height: 45,
child: Row(
children: [
Flexible(
flex: 9,
child: TextField(
minLines: 1,
keyboardType: TextInputType.multiline,
maxLines: null,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: BorderSide(color: Color(0xFFD6DDE1))),
focusedBorder: new OutlineInputBorder(
borderRadius: new BorderRadius.circular(20.0),
borderSide: BorderSide(color: cbossBlue),
),
filled: true,
hintStyle: TextStyle(color: Color(0xFFD6DDE1)),
hintText: "Add note here",
fillColor: Colors.white70),
),
),
Flexible(
flex: 1,
child: IconButton(
icon: Icon(Icons.fullscreen),
onPressed: () {
},
),
)
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(10, 15, 10, 0),
child: Container(
width: double.maxFinite,
child: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Flexible(
flex: 5,
child: Padding(
padding: const EdgeInsets.only(right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(color: cbossBlue),
borderRadius: BorderRadius.all(Radius.circular(2))),
height: 50,
child: InkWell(
onTap: () {
},
child: Center(
child: Text('Reject',
style: TextStyle(
color: cbossBlue,
fontWeight: FontWeight.bold))),
),
),
),
),
Flexible(
flex: 5,
child: Padding(
padding: const EdgeInsets.only(right: 5),
child: Container(
decoration: BoxDecoration(
color: Colors.blue,
borderRadius: BorderRadius.all(Radius.circular(2))),
height: 50,
child: InkWell(
onTap: () {
},
child: const Center(
child: Text(
'Approve',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.white),
)),
),
),
),
),
],
),
),
),
],
),
);
}
}
uj5u.com熱心網友回復：
修復它的最常見方法是用SingleChildScrollView小部件包裝您的表單。
uj5u.com熱心網友回復：
分享您的小部件樹，以便我們為您提供最佳解決方案。現在，如果您有一個Column作為根小部件，請將其替換為Listview. 這將解決您的問題并在鍵盤打開時使視圖可滾動。小部件樹將像這樣鎖定：
ListView(
children:[
widget1(),
widget2(),
.....
]
)
uj5u.com熱心網友回復：
編輯
我為你嘗試了這樣的解決方案。我認為它會更簡單，更容易編輯。我會拍個模擬器視頻，一會兒加，到時候你就可以想辦法了。我希望它能夠回答你的問題。
class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Container(
height: MediaQuery.of(context).size.height,
child: Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Column(
children: [
Expanded(
child: Stack(
children: [
ListView(
children: [
Column(
children: const [
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
Text("Foo"),
],
),
],
)
],
)),
TextField(
minLines: 1,
keyboardType: TextInputType.multiline,
maxLines: 5,
decoration: InputDecoration(
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Color(0xFFD6DDE1))),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(20.0),
borderSide: const BorderSide(color: Colors.blue),
),
filled: true,
hintStyle: TextStyle(color: Color(0xFFD6DDE1)),
hintText: "Add note here",
fillColor: Colors.white70),
),
ElevatedButton(onPressed: () {}, child: Text("Floating Texts")),
],
),
),
);
}
}
我想你想要這樣的東西:) https://i.imgur.com/spxpZsZ.mp4
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/456621.html