在Flutter和android中一樣,當(dāng)彈出鍵盤的時候如果輸入框不能夠滾動,就會超出邊界錯誤或者是鍵盤彈出框擋住了輸入框,導(dǎo)致無法看見輸入框中的內(nèi)容,為了能夠解決這種問題我們需要使用滾動的View,然而再Flutter中就是 SingleChildScrollView,使用方法如下
1、直接使用 SingleChildScrollView 包裹子元素
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xFFcccccc),
body: SingleChildScrollView(
child: Column(
children: [
Container(
height: 200,
color: Colors.black12,
child: Center(child: Text("頂部")),
),
SizedBox(height: 20),
Container(
height: 200,
margin: EdgeInsets.all(10),
width: double.infinity,
color: Colors.white,
child: Column(
children: [
Container(
height: 40,
width: 250,
margin: EdgeInsets.all(10),
child: TextField(
decoration: InputDecoration(
fillColor: Color(0xffcfcccc),
filled: true,
hintText: '請輸入賬號',
contentPadding: EdgeInsets.only(left: 20),
),
),
),
Container(
height: 40,
width: 250,
margin: EdgeInsets.all(10),
child: TextField(
decoration: InputDecoration(
fillColor: Color(0xfffdfccc),
filled: true,
hintText: '請輸入密碼',
contentPadding: EdgeInsets.only(left: 20),
),
),
)
],
),
),
],
),
),
);
}
模仿使用上面代碼就可以解決彈出鍵盤導(dǎo)致的異常問題了
