【问题标题】:Flutter Make Text Field go Up with keyboardFlutter 使用键盘使文本字段向上
【发布时间】:2021-04-06 21:02:17
【问题描述】:

我在底部导航栏中有一个文本字段。我正在制作一个聊天屏幕,所以当用户点击文本字段时,键盘会向上,但文本字段会向下并且不向上。我尝试了很多解决方案,但没有任何效果,我真的被困住了。 颤振版本

颤振 1.26.0-1.0.pre

return  Scaffold(
     resizeToAvoidBottomInset: false,
     backgroundColor: Palette.primary,
     appBar: MyAppBar(),
     body: MyBody(),
     bottomNavigationBar: TextField(
               maxLength: 255,
               decoration: InputDecoration(
                 hintText: " write here",
                 focusedBorder: InputBorder.none,
                 enabledBorder: InputBorder.none,
                 errorBorder: InputBorder.none,
                 disabledBorder: InputBorder.none,
                 border: null,
                 hintStyle: GoogleFonts.getFont('Tajawal',
                     color: Colors.white, fontWeight: FontWeight.w500),
                 counterText: "",
               ),
               style: GoogleFonts.getFont('Tajawal',
                   fontSize: 17, fontWeight: FontWeight.w500),
             ),
     ),

 );
}
}

【问题讨论】:

  • Stack 小部件包裹您的文本字段并将对齐设置为底部并删除resizeToAvoidBottomInset: false,
  • @AR 谢谢你,但没用。
  • 发生了什么?
  • 没什么,和截图一样。
  • 从底部导航栏中删除文本字段并添加到正文中

标签: flutter dart navigation keyboard bottom


【解决方案1】:

您可以在列表视图中包装您的文本字段
将反向命名参数设置为 true,然后调用 reversed getter 并运行 tolist 函数

 ListView(
          reverse: true,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'I move!',
              ),
            ),
          ].reversed.toList(),
        ), 

结果:

完整代码

import 'package:flutter/material.dart';

void main() => runApp(new MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      debugShowCheckedModeBanner: false,
      title: ' Demo',
      theme: new ThemeData(
        primaryColor: new Color(0xFFFF0000),
      ),
      home: new FormDemo(),
    );
  }
}

class FormDemo extends StatefulWidget {
  @override
  _FormDemoState createState() => _FormDemoState();
}

class _FormDemoState extends State<FormDemo> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(''),
      ),
      body: Container(
        padding: const EdgeInsets.all(20.0),
        child: new ListView(
          reverse: true,
          children: <Widget>[
            TextFormField(
              decoration: InputDecoration(
                labelText: 'I move!',
              ),
            ),
          ].reversed.toList(),
        ),
      ),
    );
  }
}

【讨论】:

  • 我一步步跟着它,但底部导航仍然没有向上移动。
  • 你能告诉我上面的代码发生了什么吗?
  • 它和截图一样,没有任何改变。顺便说一句,如果您可以为我提供一个解决方案,其中文本字段位于正文中,这无关紧要,重要的是我需要将文本字段固定在底部。
  • 你可以把它放在与Align( alignment: Alignment.bottomCenter, child: TextField() ),对齐的小部件中
猜你喜欢
  • 2018-12-22
  • 2021-05-20
  • 1970-01-01
  • 2020-05-21
  • 1970-01-01
  • 2016-07-07
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多