在 Tap 上顯示 Flutter 文本選擇工具欄溢出

Question

當嘗試選擇選擇工具欄顯示的部分輸入文本時，TextFormField Widget 中出現問題，但通常不會從右側溢出 3.0 像素！！！ 有趣的部分是它離開屏幕左側超過 3.0 像素，它沒有居中！！ 代碼在下面....

Container(
                            height:
                                MediaQuery.of(context).size.height * 0.25,
                            margin: EdgeInsets.fromLTRB(marginFixed * 0.5,
                                0.0, marginFixed * 0.5, marginFixed * 0.5),
                            child: TextField(
                              enableInteractiveSelection: true,
                              expands: true,
                              controller: _noteController,
                              style: TextStyle(
                                  color: StyleCustom.txtPrimary,
                                  fontSize: 16.0),
                              maxLines: null,
                              minLines: null,
                              decoration: InputDecoration(
                                hintStyle: TextStyle(
                                    color: StyleCustom.txtSecondry),
                                border: InputBorder.none,
                                hintText: 'write your note here',
                              ),
                              onChanged: (String value) {
                                debugPrint(value);
                              },
                            ),
                          ),

I/flutter ( 5019): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 5019): The following assertion was thrown during layout:
I/flutter ( 5019): A RenderFlex overflowed by 3.0 pixels on the right.
I/flutter ( 5019):
I/flutter ( 5019): The overflowing RenderFlex has an orientation of Axis.horizontal.
I/flutter ( 5019): The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and
I/flutter ( 5019): black striped pattern. This is usually caused by the contents being too big for the RenderFlex.
I/flutter ( 5019): Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the
I/flutter ( 5019): RenderFlex to fit within the available space instead of being sized to their natural size.
I/flutter ( 5019): This is considered an error condition because it indicates that there is content that cannot be
I/flutter ( 5019): seen. If the content is legitimately bigger than the available space, consider clipping it with a
I/flutter ( 5019): ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex,
I/flutter ( 5019): like a ListView.
I/flutter ( 5019): The specific RenderFlex in question is: RenderFlex#70842 relayoutBoundary=up4 OVERFLOWING:
I/flutter ( 5019):   creator: Row ← ConstrainedBox ← Container ← DefaultTextStyle ← AnimatedDefaultTextStyle ←
I/flutter ( 5019):     _InkFeatures-[GlobalKey#e7167 ink renderer] ← NotificationListener<LayoutChangedNotification> ←
I/flutter ( 5019):     PhysicalModel ← AnimatedPhysicalModel ← Material ← _TextSelectionToolbar ← CustomSingleChildLayout
I/flutter ( 5019):     ← ⋯
I/flutter ( 5019):   parentData: <none> (can use size)
I/flutter ( 5019):   constraints: BoxConstraints(0.0<=w<=360.0, h=44.0)
I/flutter ( 5019):   size: Size(360.0, 44.0)
I/flutter ( 5019):   direction: horizontal
I/flutter ( 5019):   mainAxisAlignment: start
I/flutter ( 5019):   mainAxisSize: min
I/flutter ( 5019):   crossAxisAlignment: center
I/flutter ( 5019):   textDirection: ltr
I/flutter ( 5019):   verticalDirection: down
I/flutter ( 5019): ◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤
I/flutter ( 5019): ════════════════════════════════════════════════════════════════════════════════════════════════════`

.

`[√] Flutter (Channel stable, v1.7.8+hotfix.2, on Microsoft Windows [Version 10.0.17763.557], locale en-US)
    • Flutter version 1.7.8+hotfix.2 at C:\src\flutter
    • Framework revision 2e540931f7 (7 days ago), 2019-07-02 09:31:07 -0700
    • Engine revision b1cb0d9e9b
    • Dart version 2.4.0


[√] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at C:\Users\midos\AppData\Local\Android\sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: C:\Program Files\Java\jdk1.8.0_211\bin\java
    • Java version Java(TM) SE Runtime Environment (build 1.8.0_211-b12)
    • All Android licenses accepted.

[!] Android Studio (not installed)
    • Android Studio not found; download from https://developer.android.com/studio/index.html
      (or visit https://flutter.dev/setup/#android-setup for detailed instructions).

[√] IntelliJ IDEA Community Edition (version 2019.1)
    • IntelliJ at C:\Program Files\JetBrains\IntelliJ IDEA Community Edition 2019.1.3
    • Flutter plugin version 36.0.4
    • Dart plugin version 191.7479.14

[√] VS Code, 64-bit edition (version 1.36.0)
    • VS Code at C:\Program Files\Microsoft VS Code
    • Flutter extension version 3.2.0

[√] Connected device (1 available)
    • COR L29 • XTX7N18A31001552 • android-arm64 • Android 8.1.0 (API 27)

! Doctor found issues in 1 category.`

Answer 1

這是 Flutter 本身的錯誤。 他們將在未來的版本中修復它。 現在你應該改變

child: Row(mainAxisSize: MainAxisSize.min, children: items), 

在第 61 行的 flutter/packages/flutter/lib/src/material/text_selection.dart 中

child: ListView(
          scrollDirection: Axis.horizontal,
          children: items,
        ),

您可以在Flutter github 上找到更多詳細信息

Answer 2

警告！

創建flutter/packages/flutter/lib/src/material/text_selection.dart否則您無法更新或升級Flutter

我對SergICE 的回答做了一些改進。

在flutter/packages/flutter/lib/src/material/text_selection.dart Line: 60

改變

return Material(
  elevation: 1.0,
  child: Container(
    height: _kToolbarHeight,
    child: Row(mainAxisSize: MainAxisSize.min, children: items), //Remove This line
    child: _buildTextHandler(items), //add this
  ),
);

現在在_TextSelectionToolbar類中創建一個方法_buildTextHandler(List<Widget> items)

  Widget _buildTextHandler(List<Widget> items) {
    if (items.length > 3) {
      return SizedBox(
        width: 300.0,
        child: ListView(
          scrollDirection: Axis.horizontal,
          children: items,
        ),
      );
    } else {
      return Row(mainAxisSize: MainAxisSize.min, children: items);
    }
 }