flutter - 使用 SingleChildScrollView() 解決鍵盤遮擋輸入框的問題
寫好了,感覺可好
點選輸入框,輸入內容時發現如下,鍵盤遮擋了輸入框
使用 SingleChildScrollView 解決遮擋問題, 就是讓它滾動起來
- 直接使用 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),
),
),
)
],
),
),
],
),
),
);
}
相關文章
- 利用flex佈局解決ios輸入框被鍵盤遮擋問題FlexiOS
- react在安卓下輸入框被手機鍵盤遮擋問題React安卓
- React Native踩坑指南:ios鍵盤遮擋輸入框React NativeiOS
- android 記一次解決鍵盤遮擋問題Android
- android記一次解決鍵盤遮擋問題Android
- flutter dialog中軟鍵盤遮擋解決衝突Flutter
- 直播平臺原始碼,關於彈出框中輸入框被遮擋問題解決原始碼
- scrollIntoView與鍵盤遮擋View
- 修復蘋果iOS 原生鍵盤遮擋input框蘋果iOS
- 解決虛擬按鍵遮擋popupWindow
- 修復安卓鍵盤彈起擋住輸入框bug安卓
- 隱藏的輸入框調起軟鍵盤問題--ios/安卓iOS安卓
- env(safe-area-inset-bottom)解決ios底部小黑線遮擋問題iOS
- 點選底部input輸入框,彈出的軟鍵盤擋住input(蘋果手機使用第三蘋果
- a-modal 使用 vxe-table 可編輯表格、下拉框被遮擋解決方法
- Flutter仿微信,支付寶密碼輸入框+自定義鍵盤Flutter密碼
- 安卓和ios鍵盤擋住輸入內容安卓iOS
- Android軟鍵盤彈出,覆蓋h5頁面輸入框問題AndroidH5
- Android輸入鍵盤隱藏解決方案Android
- 點選EditText的時候出現被鍵盤遮擋 在不使用scrollView的情況View
- 輸入框換行問題
- Flutter 密碼輸入框 驗證碼輸入框Flutter密碼
- (資料科學學習手札87)利用adjustText解決matplotlib文字標籤遮擋問題資料科學
- flutter TextField 輸入框元件Flutter元件
- powerpoint: 遮擋文字
- Flutter 疑難雜症系列:鍵盤原理及常見問題解決方案Flutter
- ubuntu xubuntu 安裝xrdp 鍵盤滑鼠無法輸入問題 採用命令列解決辦法Ubuntu命令列
- 輸入框跟隨鍵盤彈出/隱藏移動
- Flutter 驗證碼輸入框Flutter
- 解決Windows安全性登入彈框的問題Windows
- Flutter_Webview 鍵盤彈出問題FlutterWebView
- linux mint 19解決 輸入法問題Linux
- Flutter 輸入車牌號,驗證碼鍵盤效果Flutter
- 解決彈出層被Flash擋住的問題
- 輸入框只能輸入負數,整數,2位小數(鍵盤彈起事件)事件
- vue自定義密碼輸入框解決瀏覽器自動填充密碼的問題Vue密碼瀏覽器
- Axure之解決文字框無法輸入
- android手機的微信H5彈出的軟鍵盤擋住了文字框,如何解決?AndroidH5