如何使我的表單在鍵盤輸入時可滾動

我在 Flutter 中設計了一個表單。我想讓它在鍵盤打開時可滾動，以便用戶可以填寫隱藏在鍵盤下方的欄位。這是相同的螢屏截圖：

我已經嘗試過使用SingleChildScrollView()，但是它不起作用。我試過在里面包裝各種小部件，SingleChildScrollView()但它不起作用。我也嘗試將其包裝在Expanded()小部件中，但仍然無法實作我的目標。

這是我的代碼：

Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(10),
      child: Column(children: <Widget>[
        Form(
            key: formKey,
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                ListTile(
                  title: const Text("Name"),
                  subtitle: TextFormField(
                    decoration: const InputDecoration(
                      border: OutlineInputBorder(
                          borderRadius: BorderRadius.all(Radius.circular(8))),
                      contentPadding: EdgeInsets.symmetric(horizontal: 10),
                      hintText: 'Type your name here',
                    ),
                  ),
                ),
        
            ElevatedButton(
              style: style,
              child: Container(
              width: MediaQuery.of(context).size.width,
              alignment: Alignment.center,
              child: const Text(
               'Update',
               style: TextStyle(
                  fontSize: 24, color: Colors.white, fontFamily: 'Nunito'),
            ),
          ),
             onPressed: () {
            }
          },
        ),
      ]),
    );

uj5u.com熱心網友回復：

嘗試用 Padding 包裹表單

padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),

uj5u.com熱心網友回復：

SingleChildScrollView 小部件應該可以解決您的問題。它可能是您放置它的位置。它需要包裝整個表單，而不僅僅是單個串列圖塊。下面是一個使用你的例子作為基礎的例子。

Widget build(BuildContext context) {
return Scaffold(
  appBar: AppBar(
    title: Text(widget.title),
  ),
  body: SingleChildScrollView(
    child: Container(
      margin: const EdgeInsets.all(10),
      child: Column(crossAxisAlignment: CrossAxisAlignment.start, children: [
        ListTile(
          title: const Text("1"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("2"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("3"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("4"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
        ListTile(
          title: const Text("5"),
          subtitle: TextFormField(
            decoration: const InputDecoration(
              border: OutlineInputBorder(
                  borderRadius: BorderRadius.all(Radius.circular(8))),
              contentPadding: EdgeInsets.symmetric(horizontal: 10),
              hintText: 'Type your name here',
            ),
          ),
        ),
      ]),
    ),
  ),
);

}

uj5u.com熱心網友回復：

我曾經遇到過這個問題，我設法通過用 a 包裹包含小部件的列SingleChildScrollView并給出它來緩解它Axis.vertical。然后轉到父腳手架并設定resizeToAvoidBottomInset為true.

Depends on how your widget tree looks

Scaffold(
    resizeToAvoidBottomInset: true,
    ///
    body: SingleChildScrollView(
     scrollDirection: Axis.vertical,
     child: Column(  /// Your widget
        children: []
      ),
     ),
    );

標籤：扑 形式 镖 滚动视图

上一篇：不支持的運算元型別：string intCodeIgiter

下一篇：如何在選擇輸入中設定選項的樣式