带有可拖动文本的不可播放的Textformfield-扑响

发布于 2025-02-12 13:08:48 字数 1209 浏览 2 评论 0原文

我正在尝试创建一个TextFormField，该fordfield从其他逻辑中获取其值，而不是直接键入文本。如果用户在此TextFormField上点击，则将提示他们进入一个新屏幕，他们可以从列表中选择内容，并且他们的选择将在TextFormField上反映。现在，选择可以是多个多数，因此文本可能比TextFormfield的宽度更长。现在，我想将其内部的文字拖动，以便用户可以看到他们的选择。我的此TextFormfield的代码就是这样。

GestureDetector(
  onTap: () => Navigator.pushNamed(context, NamedRoutes.breedScreenRoute),
  child: TextFormField(
    controller: controller,
    enabled: false,
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
  ),
);

如果我想拖动文本，则需要启用TextFormField。但是，然后用户也将能够输入我不想要的。我该如何实现？

原文

I'm trying to create a TextFormField that takes it's value from some other logic instead of directly typing the text. If the user taps on this TextFormField, they'll be prompted to a new screen where they can select things from a list and their choice will be reflected back on the TextFormField. Now, the selection can be multiple hence the text may be longer than the TextFormField's width. Now I want to make the text inside it draggable so that the user can see their selection. My code for this TextFormField is like such.

GestureDetector(
  onTap: () => Navigator.pushNamed(context, NamedRoutes.breedScreenRoute),
  child: TextFormField(
    controller: controller,
    enabled: false,
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
  ),
);

If I want to drag the text, I need to enable the TextFormField. But then user will be able to type in it as well which I don't want. How can I achieve this?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

浪漫之都 2025-02-19 13:08:49

SET 已启用：true，scrollphysics：lobsyscrollablesscrollphysics（） and readonly：true。并使用ontap内部textformfield而不是gesturedetector。用户可以滚动，但不能编辑它。

TextFormField(
    controller: controller,
    enabled: true,
    readOnly: true,
    scrollPhysics: AlwaysScrollableScrollPhysics(),
   onTap: () => Navigator.pushNamed(context,  NamedRoutes.breedScreenRoute),
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
);

Set enabled: true, scrollPhysics: AlwaysScrollableScrollPhysics() and readOnly: true. And use onTap inside TextFormField instead of GestureDetector. User can scroll but can not edit it.

TextFormField(
    controller: controller,
    enabled: true,
    readOnly: true,
    scrollPhysics: AlwaysScrollableScrollPhysics(),
   onTap: () => Navigator.pushNamed(context,  NamedRoutes.breedScreenRoute),
    decoration: InputDecoration(
      suffixIcon: Padding(
        SvgPicture.asset(
          "assets/images/forwardArrow.svg",
          fit: BoxFit.scaleDown,
        )
      ),
      contentPadding:
          const EdgeInsets.symmetric(horizontal: 14.0, vertical: 15.0),
      focusedBorder: const UnderlineInputBorder(
        borderSide: BorderSide(color: Color(0xFFD9E2EC)),
      ),
      enabledBorder: const UnderlineInputBorder(
        borderSide: BorderSide(
          color: Color(0xFFD9E2EC),
        ),
      ),
      labelText: "Tell us more about the breed",
      labelStyle: TextStyle(
        fontSize: 14.0,
        color: Color(0xFF6E7191),
        fontWeight: FontWeight.w400,
      ),
    ),
);

回复收藏 0 原文