Question

在我的聊天应用程序中，我使用了一个类似于 whatsapp 的键盘，其中包括一个选择表情符号的选项。我在 TextFormField 的左侧制作了一个图标，并在点击该图标后使用 emoji_picker 来选择表情符号。现在，使用 FocusNode 和 TextEditingController，我设法让我的键盘像在 WhatsApp 中一样工作（即每当你点击图标时，你可以从空间中选择表情符号，当你点击在 TextFormField, 内，键盘将代替那个出现）。现在的问题是，它向我显示了 23 个像素溢出的异常。但黄色/黑色条纹只出现一秒钟，然后消失，应用程序运行正常。

请注意，仅当我在点击 TextFormField 后点击图标（表情符号的图标，我在本文的第 1 行中提到）时才会出现异常/溢出。 这意味着当我第一次点击TextFormField，然后点击选择表情符号的图标时，会显示此异常，除此之外，不会显示任何错误。然后它消失了，一切正常。

请帮帮我，我卡住了，无法指出问题的根源。

选择文本字段区域。

2) 像素流的极小实例（我必须录制屏幕才能从视频中获取 ss）。

3) 一秒钟后。

异常/错误是 -

The following assertion was thrown during layout:
A RenderFlex overflowed by 23 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///C:/Users/Hp/AndroidStudioProjects/flutter_whatsapp/lib/Screens/individual_page.dart:137:24
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#4985a relayoutBoundary=up2 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 0.0) (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, 0.0<=h<=321.4)
...  size: Size(411.4, 321.4)
...  direction: vertical
...  mainAxisAlignment: end
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
====================================================================================================

这是代码-

import 'package:emoji_picker/emoji_picker.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_whatsapp/model/chat_model.dart';
import 'package:flutter_svg/flutter_svg.dart';
import 'dart:math' as math;

class IndividualPage extends StatefulWidget {
  final ChatModel chatModel;
  IndividualPage({Key key, this.chatModel}) : super(key: key);

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

class _IndividualPageState extends State<IndividualPage> {

  bool show=false;
  FocusNode focusNode=FocusNode();
  TextEditingController _controller = TextEditingController();

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    focusNode.addListener(() {
      if(focusNode.hasFocus) {
        setState(() {
          show=false;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[350],
      appBar: AppBar(
        titleSpacing: MediaQuery.of(context).size.width * 0.01,
        leadingWidth: MediaQuery.of(context).size.height * 0.1,
        leading: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            InkWell(
              onTap: () {
                Navigator.pop(context);
              },
              child: Icon(
                Icons.arrow_back,
                color: Colors.white,
              ),
            ),
            CircleAvatar(
              child: SvgPicture.asset(
                widget.chatModel.isGroup
                    ? "assets/groups.svg"
                    : "assets/person.svg",
                color: Colors.white,
                height: 35.0,
              ),
              radius: MediaQuery.of(context).size.width*0.04,   
              backgroundColor: Colors.grey[400],
            ),
          ],
        ),
        title: InkWell(
          onTap: () {},
          child: Container(
            margin: EdgeInsets.all(3.0),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(widget.chatModel.name),
                Text(
                  'last seen today at 16:03',
                  style: TextStyle(
                    fontWeight: FontWeight.w400,
                    fontSize: MediaQuery.of(context).size.width * 0.03,
                  ),
                ),
              ],
            ),
          ),
        ),
        actions: [
          Icon(
            Icons.videocam,
          ),
          SizedBox(
            width: MediaQuery.of(context).size.width * 0.05,
          ),
          Icon(
            Icons.call,
          ),
          PopupMenuButton<String>(onSelected: (value) {
            print(value);
          }, itemBuilder: (BuildContext context) {
            return [
              PopupMenuItem(
                child: Text("View Contact"),
                value: "View Contact",
              ),
              PopupMenuItem(
                child: Text("Media, link, and docs"),
                value: "Media, link, and doc",
              ),
              PopupMenuItem(
                child: Text("Search"),
                value: "Search",
              ),
              PopupMenuItem(
                child: Text("Mute Notifications"),
                value: "Mute Notifications",
              ),
              PopupMenuItem(
                child: Text("Wallpaper"),
                value: "Settings",
              ),
              PopupMenuItem(
                child: Text("More"),
                value: "Settings",
              ),
            ];
          }),
        ],
      ),
      body: Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width,
        child: WillPopScope(
          child: Stack(
            children: [
              ListView(),
              Align(
                alignment: Alignment.bottomCenter,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.end,
                  children: [
                    Row(
                      children: [
                        Container(
                            width: MediaQuery.of(context).size.width * 0.88,
                            child: Card(
                              margin: EdgeInsets.only(left: MediaQuery.of(context).size.width*0.0175, right: MediaQuery.of(context).size.width*0.017, bottom:  MediaQuery.of(context).size.width*0.013),
                                shape: RoundedRectangleBorder(
                                  borderRadius: BorderRadius.circular(23.0),
                                ),
                                child: TextFormField(
                                  controller: _controller,
                                  focusNode: focusNode,
                                  cursorHeight: MediaQuery.of(context).size.width*0.055,
                                  textAlignVertical: TextAlignVertical.center,
                                  keyboardType: TextInputType.multiline,
                                  maxLines: 25,
                                  minLines: 1,
                                  decoration: InputDecoration(
                                    border: InputBorder.none,
                                    hintText: "Type a message",
                                    contentPadding: EdgeInsets.only(bottom: 5.0, right: 10.0, top: 5.0),
                                    prefixIcon: Padding(
                                      padding: const EdgeInsets.only(left: 8.0),
                                      child: IconButton(
                                        icon: Icon(Icons.emoji_emotions_outlined),
                                        onPressed: () {
                                          focusNode.unfocus();
                                          focusNode.canRequestFocus=false;
                                          setState(() {
                                            show=!show;
                                          });
                                        },
                                      ),
                                    ),
                                    suffixIcon: Row(
                                      mainAxisSize: MainAxisSize.min,
                                      children: [
                                        Transform.rotate(
                                          angle: 320 * math.pi/180,
                                          child: IconButton(
                                              icon: Icon(Icons.attach_file),
                                            onPressed: (){},
                                          ),
                                        ),
                                        IconButton(
                                          icon: Icon(Icons.camera_alt),
                                          onPressed: (){},
                                        ),
                                      ],
                                    ),
                                  ),
                                ))),
                        Padding(
                          child: CircleAvatar(
                            backgroundColor: Color(0xFF128C7E),
                            radius: MediaQuery.of(context).size.width*0.058,
                            child: Icon(
                              Icons.mic,
                              color: Colors.white,
                            ),
                          ),
                          padding: EdgeInsets.only(bottom: 5.0, right: 1.0),
                        ),
                      ],
                    ),
                    show ? EmojiSelect() : Container(),
                  ],
                ),
              )
            ],
          ),
          onWillPop: () {
            if(show) {
              setState(() {
                show=false;
              });
            }
            else {
              Navigator.pop(context);
            }
            return Future.value(false);
          },
        ),
      ),
    );
  }
  Widget EmojiSelect() {
    return EmojiPicker(
      columns: 7,
      rows: 4,
      onEmojiSelected: (emoji, category) {
        print(emoji);
        setState(() {
          _controller.text = _controller.text+emoji.emoji;
        });
      },
    );
  }
}

Answer 1

我建议您将 Scaffold 的主体设为可滚动的小部件，例如 ListView 或 SingleChildScrollView

渲染像素流错误即将到来。但我的应用程序在颤振中运行良好

1 个答案: