Flutter使文本字段随键盘上升

Question

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

Flutter 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),
             ),
     ),

 );
}
}

Answer 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(),
        ),
      ),
    );
  }
}

Flutter使文本字段随键盘上升

Flutter Make Text Field go Up with keyboard

navigation

keyboard

dart

flutter

结果：