flutter - 使用 SingleChildScrollView() 解決鍵盤遮擋輸入框的問題

素燃發表於2020-10-20

寫好了,感覺可好

在這裡插入圖片描述

點選輸入框,輸入內容時發現如下,鍵盤遮擋了輸入框

在這裡插入圖片描述

使用 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),
                      ),
                    ),
                  )
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

相關文章