美文网首页flutter
Flutter键盘遮挡问题的适配示例代码

Flutter键盘遮挡问题的适配示例代码

作者: __Mr_Xie__ | 来源:发表于2023-07-16 09:02 被阅读0次

一套代码,在iOS手机上运行不存在键盘遮挡问题,在Android手机上运行则存在。以下是解决键盘遮挡问题的示例代码:

import 'dart:io';
import 'package:flutter/material.dart';

class TestStf extends StatefulWidget {
  const TestStf({super.key});

  @override
  State<TestStf> createState() => _TestStfState();
}

class _TestStfState extends State<TestStf> {
  final ScrollController _scrollController = ScrollController();

  //焦点1
  final FocusNode _focusNode1 = FocusNode();
  //焦点2
  final FocusNode _focusNode2 = FocusNode();

  @override
  void initState() {
    super.initState();

    _scrollController.addListener(() {
      //滚动的距离
      print("滚动的距离:${_scrollController.offset}");
      //可滚动的最大距离
      print("可滚动的最大距离:${_scrollController.position.maxScrollExtent}");
    });

    //焦点1监听
    _focusNode1.addListener(() {
      _jumpTo();
    });

    //焦点2监听
    _focusNode2.addListener(() {
      _jumpTo();
    });
  }

  _jumpTo() {
    //不加延迟执行,代码执行jumpTo或animateTo代码会报错
    Future.delayed(const Duration(seconds: 1), () {
      if (Platform.isAndroid) {
        double offset = _scrollController.position.maxScrollExtent;
        //可以结合_scrollController.position.maxScrollExtent即可滚动的最大距离,计算想滚动到指定的位置
        // _scrollController.jumpTo(offset);
        _scrollController.animateTo(offset,
            duration: const Duration(milliseconds: 200), curve: Curves.ease);
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Flutter键盘遮挡问题的适配"),
      ),
      body: ListView(
        controller: _scrollController,
        children: [
          const SizedBox(
            height: 100,
          ),
          TextField(
            focusNode: _focusNode1,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              hintText: "请输入内容1",
            ),
          ),
          const SizedBox(
            height: 600,
          ),
          TextField(
            focusNode: _focusNode2,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              hintText: "请输入内容2",
            ),
          )
        ],
      ),
    );
  }
}

相关文章

网友评论

    本文标题:Flutter键盘遮挡问题的适配示例代码

    本文链接:https://www.haomeiwen.com/subject/htubudtx.html