我试着做一个底部表,有一个文本字段,自动聚焦设置为true,这样键盘就会弹出。但是,键盘重叠在bottomsheet上。有没有办法移动键盘上方的底部?

Padding(
  padding:
      EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
  child: Column(children: <Widget>[
    TextField(
      autofocus: true,
      decoration: InputDecoration(hintText: 'Title'),
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),
    TextField(
      decoration: InputDecoration(hintText: 'Additional details!'),
      keyboardType: TextInputType.multiline,
      maxLines: 4,
    ),]);

当前回答

你应该用这个,

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: RoundedRectangleBorder(
      // <-- for border radius
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    builder: (BuildContext context) {
      return SingleChildScrollView(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: drunkenWidget()...

//BTW, Never ever Drink

其他回答

import 'dart:async'; import 'dart:ui'; import 'package:flutter/foundation.dart'; import 'package:flutter/widgets.dart'; import 'package:flutter/material.dart'; import '../weight/boostrap/flutter_bootstrap.dart'; import '../weight/boostrap/bootstrap_widgets.dart'; /* TextEditingController txtname = TextEditingController(); showModalBottomSheet( context: context, isScrollControlled: true, shape: const RoundedRectangleBorder( borderRadius: BorderRadius.only( topLeft: Radius.circular(20), topRight: Radius.circular(20), ), ), builder: (context) => SingleChildScrollView( padding: EdgeInsets.only( bottom: MediaQuery.of(context).padding.bottom), child: new AddItem( tektk: 'Category', tektd: 'Add', txtname: txtname, ismultik:false, onPressed: () {}), ), ); */ class AddItem extends StatelessWidget { const AddItem( {Key? key, required this.ismultik, required this.tektd, required this.tektk, required this.txtname, required this.onPressed}) : super(key: key); final bool ismultik; final String tektk; final String tektd; final VoidCallback? onPressed; final TextEditingController txtname; @override Widget build(BuildContext context) { final MediaQueryData mediaQueryData = MediaQuery.of(context); bootstrapGridParameters(gutterSize: 10); return Padding( padding: mediaQueryData.viewInsets, child: Container( padding: EdgeInsets.only(bottom: 90.0, left: 10.0, right: 10.0), child: Column( crossAxisAlignment: CrossAxisAlignment.stretch, mainAxisAlignment: MainAxisAlignment.spaceBetween, children: [ ListTile( trailing: SizedBox.fromSize( size: Size(35, 35), child: ClipOval( child: Material( color: Colors.indigo, child: InkWell( splashColor: Colors.white, onTap: () { Navigator.pop(context); }, child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Icon(Icons.close, color: Colors.white), ], ), ), ), ), ), ), BootstrapRow(height: 0, children: [ BootstrapCol( sizes: 'col-md-12', child: TextField( style: TextStyle(color: Colors.black), decoration: new InputDecoration( border: new OutlineInputBorder( borderSide: new BorderSide(color: Colors.white)), labelText: tektk, ), keyboardType: ismultik == true ? TextInputType.multiline : TextInputType.text, maxLines: null, minLines: 1, controller: txtname, ), ), BootstrapCol( sizes: 'col-md-12', child: ElevatedButton( style: ElevatedButton.styleFrom( primary: Colors.green, // background onPrimary: Colors.white, // foreground ), onPressed: onPressed, child: Text(tektd)), ), ]), ], ), ), ); } }

如果你有全屏或固定大小的showModalBottomSheet,不要使用填充,这不会解决你的问题。使用边距代替填充,就像这样:

  showModalBottomSheet(
          context: context,
          builder: (context) {
            return Container(
                marign: EdgeInsets.only(
                    bottom: MediaQuery.of(context).viewInsets.bottom),
                child: TextField()
            );
          }); 

你应该用这个,

showModalBottomSheet(
    isScrollControlled: true,
    context: context,
    shape: RoundedRectangleBorder(
      // <-- for border radius
      borderRadius: BorderRadius.only(
        topLeft: Radius.circular(10.0),
        topRight: Radius.circular(10.0),
      ),
    ),
    builder: (BuildContext context) {
      return SingleChildScrollView(
        padding:
            EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        child: drunkenWidget()...

//BTW, Never ever Drink

我通过增加打开键盘时子部件的高度来解决这个问题。 MediaQuery.of(context). viewinsets的初始值。底部为0,当键盘聚焦时它会改变。

showModalBottomSheet<void>(
      enableDrag: true,
      isScrollControlled: true,
      context: context,
      builder: (BuildContext context) {
        return Card(
          color: Colors.white,
          child: Container(
            height: MediaQuery.of(context).size.height / 2 +
                MediaQuery.of(context).viewInsets.bottom,
            child: Column(
              children: <Widget>[
                TextField(),
                TextField(),
              ],
            ),
          ),
        );
      },
    );

给那些不能解决问题的人尝试所有的答案。这些答案是正确的,但不太清楚。

当使用

MediaQuery.of(上下文).viewInsets.bottom)

make sure your context variable is using the one provided by bottom sheet builder property.

c builder:(* * * *) = > MediaQuery.of (c * * * *)