如何使容器在键盘显示后仍保持固定位置

huangapple go评论61阅读模式
英文:

How to make container fix positioned even after keyboard is displayed

问题

我已经玩了一段时间,但无法使其正常工作。基本上,我有底部导航栏,并且我希望在底部导航栏的顶部有一个固定位置的容器,即使键盘显示时也保持在那里。到目前为止,无论我尝试什么,容器在调用键盘时都会出现在键盘的顶部。这是我迄今为止的代码。基本上,我的最后希望是将其包装在Stack小部件中,但那行不通。

class HomeScreen extends StatefulWidget {
  static const String id = '/app';
  final FirebaseUser user;
  HomeScreen({this.user});

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  int _currentIndex = 0;
  final List<Widget> _children = [Screen1(), Screen2()];

  void bottomTabHandler(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: bottomTabHandler,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.receipt),
            title: Text('Option1'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.receipt),
            title: Text('Option2'),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.add),
            title: Text('Option3'),
          ),
        ],
      ),
      appBar: AppBar(
        centerTitle: true,
        title: Text('XXX'),
        automaticallyImplyLeading: false,
      ),
      endDrawer: AppbarDrawer(),
      body: Stack(
        children: <Widget>[
          _children[_currentIndex],
          Positioned(
            bottom: 0,
            child: Container(
              width: 250,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
    );
  }
}

我在Screen1上有一个简单的TextField,这就是我得到的结果。

英文:

I've been playing with this for some time and can not get this working. Basically I've got bottom navigation bar and I want at the top of the bottom navigation bar fixed positioned container which stay there even if the keyboard is displayed. So far no matter what I tried the container ends up at the top of the keyboard when the keyboard is called. Here is my code where I ended up so far. Basically my last hope was to wrap it in Stack widget but that didn't work.

class HomeScreen extends StatefulWidget {   static const String id = &#39;/app&#39;;   final FirebaseUser user;   HomeScreen({this.user});

  @override   _HomeScreenState createState() =&gt; _HomeScreenState(); }

class _HomeScreenState extends State&lt;HomeScreen&gt; {   int _currentIndex
= 0;   final List&lt;Widget&gt; _children = [Screen1(), Screen2()];

  void bottomTabHandler(int index) {
    setState(() {
      _currentIndex = index;
    });   }

  @override   Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: bottomTabHandler,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.receipt),
            title: Text(&#39;Option1&#39;),
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.receipt),
            title: Text(&#39;Option2&#39;),
          ),
          BottomNavigationBarItem(
              icon: Icon(Icons.add), title: Text(&#39;Option3&#39;)),
        ],
      ),
      appBar: AppBar(
        centerTitle: true,
        title: Text(&#39;XXX&#39;),
        automaticallyImplyLeading: false,
      ),
      endDrawer: AppbarDrawer(),
      body: Stack(
        children: &lt;Widget&gt;[
          _children[_currentIndex],
          Positioned(
            bottom: 0,
            child: Container(
              width: 250,
              height: 100,
              color: Colors.blue,
            ),
          ),
        ],
      ),
     );
    }    
}

I've got simple TextField at screen1 and this is what I get

如何使容器在键盘显示后仍保持固定位置如何使容器在键盘显示后仍保持固定位置

答案1

得分: 4

如果您想确保小部件在键盘出现时不会调整大小,可以使用ScaffoldresizeToAvoidBottomInset属性:

return Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
  ...
英文:

If you want to make sure the Widgets don't get adjusted when the keyboard appears, you can use the resizeToAvoidBottomInset property of the Scaffold:

return Scaffold(
  resizeToAvoidBottomInset: false,
  body: Stack(
  ...

huangapple
  • 本文由 发表于 2020年1月3日 18:41:56
  • 转载请务必保留本文链接:https://go.coder-hub.com/59577114.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定