dart 当键盘出现时,如何向上移动覆盖部件?

j7dteeu8  于 2023-09-28  发布在  其他
关注(0)|答案(1)|浏览(154)

我使用此library显示了一个覆盖小部件
我已经在弹出窗口中添加了一个文本字段,但是当键盘出现时,它隐藏了覆盖小部件!

import 'package:custom_pointed_popup/custom_pointed_popup.dart';
import 'package:custom_pointed_popup/utils/triangle_painter.dart';
import 'package:flutter/material.dart';

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

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  List<GlobalKey> keys = List.generate(25, (index) => GlobalKey());

  ///
  void show(GlobalKey key) {
    CustomPointedPopup popup = CustomPointedPopup(
        backgroundColor: Colors.grey.withOpacity(0.1),
        context: context,
        widthFractionWithRespectToDeviceWidth: 5,
        displayBelowWidget: true,
        triangleDirection: TriangleDirection.Straight,
        popupElevation: 10,
        item: CustomPointedPopupItem(
            itemWidget: Padding(
          padding: MediaQuery.viewInsetsOf(context),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              for (int i = 0; i < 5; i++) const Text('hello'),
              TextField(
                scrollPadding: MediaQuery.viewInsetsOf(context),
              )
            ],
          ),
        )),
        onClickWidget: (onClickMenu) {
          print('popup item clicked');
          print(onClickMenu);
        },
        onDismiss: () {
          print('on dismissed called');
        });
    popup.show(widgetKey: key);
  }

  @override
  Widget build(BuildContext context) {
    print(MediaQuery.viewInsetsOf(context).bottom);
    return Scaffold(
      body: Padding(
        padding: MediaQuery.viewInsetsOf(context),
        child: GridView.builder(
          gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 4,
              mainAxisSpacing: 32,
              crossAxisSpacing: 32,
              mainAxisExtent: 120),
          itemBuilder: (_, int pos) {
            return InkWell(
              onTap: () {
                show(keys[pos]);
              },
              child: Container(
                key: keys[pos],
                color: pos % 2 == 0 ? Colors.black : Colors.grey,
              ),
            );
          },
          itemCount: keys.length,
        ),
      ),
      resizeToAvoidBottomInset: false,
    );
  }
}

输出图像=> https://ibb.co/rkg2Rpv

68bkxrlz

68bkxrlz1#

你可以尝试使用一个SingleChildScrollView来使弹出窗口的内容在键盘出现时可滚动。
使用SingleChildScrollView Package itemWidget的内容

item: CustomPointedPopupItem(
  itemWidget: SingleChildScrollView(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      mainAxisSize: MainAxisSize.min,
      children: [
        for (int i = 0; i < 5; i++) const Text('hello'),
        TextField(
          scrollPadding: const EdgeInsets.all(16.0), // Adjust as needed
        )
      ],
    ),
  ),
)

相关问题