Question

我有一个TextField，它的属性prefixIcon接受小部件。我传递了一个GestureDetector，以便可以对其执行onTap事件。但是我面临的问题是我点击它，尽管它调用了onTap事件，但与此同时，它也使TextField着重于进一步启动键盘。

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body:MyWidget,
    );
  }
}

class MyWidget extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return MyWidgetState();
  }
}

class MyWidgetState extends State<MyWidget>
{
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 200,
      width: 200,
      padding: EdgeInsets.all(20),
      child: TextField(
        decoration: InputDecoration(
          prefixIcon: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => print("hmm"),
          ),
        ),
      ),
    );
  }
}

因此，我试图找到一种方法来点击prefixIcon小部件（此处，GestureDetector不关注TextField）。如何实现该功能？

Answer 1

您可以将TextField包裹在一行中，然后在可点击的图标之前添加一个图标。那么默认行为是什么都没有关系。

Container(
  height: 200,
  width: 200,
  padding: EdgeInsets.all(20),
  child: Row(
    children: <Widget>[
      GestureDetector(
        child: Container(color: Colors.greenAccent, width: 25, height: 25,),
        onTap: () => print("hmm"),
      ),
      Expanded(child: TextField()),
    ],
  ),
)

我认为我为您提供了更好的解决方案，因为它不需要对FocusNode进行任何操作。只需将两者传递到堆栈中，即可使用CompositedTransformTarget / Followers，并在装饰器上放置所需的项目。我已经对其进行了测试，并且可以正常工作。它还可以使您想要放置在前缀输入上方的图标紧随文本字段的大小而变化。保持同步。

class TestWidget extends StatelessWidget {

  final LayerLink link = LayerLink();

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[

        TextField(
          maxLines: null,
          decoration: InputDecoration(
            prefixIcon: CompositedTransformTarget(
              child: Container(color: Colors.transparent, width: 25, height: 25,),
              link: link,
              ),
          )
        ),



        CompositedTransformFollower(
          link: link,
          child: GestureDetector(
            child: Container(color: Colors.greenAccent, width: 25, height: 25,),
            onTap: () => Vibrate.feedback(FeedbackType.heavy),
          ),
        )
      ],
    );
  }
}

Answer 2

我遇到了类似的问题，在这里我解释了该问题以及可能的解决方案：Flutter DropdownButton inside TextFormField as prefix

在您的情况下，{city: "San Pedro Garza García, N. L.", company: "CEMEX", date: "hace 13 días", job_description: "we're looking for a talented professional to staff…sualization tools software.↵attention to details.", job_title: "(cen) process assessment consultant", …} city: "San Pedro Garza García, N. L." company: "CEMEX" date: "hace 13 días" job_description: "we're looking for a talented professional to staff the position of (cen) process assessment consultant.↵only resumes in english↵main accountabilities:↵the process assessment consultant will provide our stakeholders, management and audit committee an independent and objective evaluation and assessment concerning the level of exposure to risk throughout all the processes of the organization. to add value by helping all the operations to improve and strengthen the effectiveness of risk management, control systems and by sharing with them the best practices identified worldwide.↵challenges of the position:↵participate in the execution of the corporate annual audit plan:↵↵a) perform pre-designed audit tests to measure operational efficiency and compliance with cemex worldwide standards and international regulations.↵↵b) apply appropriate audit techniques to identify weaknesses in the internal control environment and report how effectively the existing controls are working in ordinary and special audits.↵↵c) lead audits by country or by process including resource and team management.↵↵d) responsible in the elaboration and presentation of audit reports to the highest levels of the company in which risks, policies non-compliances and any other deviations are informed.↵↵e) obtain remediation plans from the operations regarding observations raised in the audits and in some cases follow up commitments to correct such observations.↵↵f) after a certain tenure in process assessment, participate in training and coaching program for newest members in the department.↵collaboration in the identification of best practices during audit execution. identify best practices and local initiatives that were already tested, that could be shared annually worldwide for others to apply in their operations.↵administrative tasks.↵↵a) collaborate with management team in process assessment’s internal indicators monitoring, such as, internal travel expense budget, high level reporting (audit committee, executive committee) writing reviews, external surveys, report tracking, etc.↵↵b) design, modify and maintain the audit test inventory (pacs) of assigned processes as a result of changes or updates of the company’s internal control environment or structure.↵internal relations:↵interact with country managers , area vp´s and operational and administrative management in the different businesses and countries in which cemex operates.↵qualificationsrequirements:↵3+ years work experience in auditing or consulting, or in cemex’s own operation.↵sap knowledge. data analytics desirable↵audit-specific training is desirable (sarbanes oxley, fcpa, coso, risk management)↵experience in financial and process auditing.↵experience in cemex´s main processes such as cement, ready mix and aggregates operations, commercial, logistics, procurement, corporate finance and human resources as well as bso main functions like accounting, treasury and commercial administration in cemex or any other international company.↵oral and written communication abilities in order to prepare and communicate information to mid-upper management of the organization.↵willingness to travel locally and internationally for audit puposes (up to 45% of the year).↵technical skills:↵mba / msc and bachelors in engineering, accounting, finance or economics.↵↵acca qualification / cia / cfe desirable.↵spanish, english (bulats >= 75 or c1). desirable: french or german.↵sap, windows office. desirable: tableau, r, sql, python↵capable of working in a multicultural environment and multi level organization. experience in motivating, coaching, team building, knowledge transfer etc.↵self-driven, flexible, willingness to work in office and on the field.↵extract and analyze big data.↵able to use and interact with data management and visualization tools software.↵attention to details." job_title: "(cen) process assessment consultant" url: ["https://www.indeed.com.mx/rc/clk?jk=a4553da8d658e8f6&fccid=f7c3c2d35dd92dfe&v不是DropdownButton，所以您可以这样做：

Container

编辑：不幸的是，Wrap( children: <Widget>[ Container( decoration: BoxDecoration( color: Colors.white, borderRadius: BorderRadius.circular(16.0), boxShadow: [BoxShadow()], ), child: Row( children: <Widget>[ GestureDetector( child: Container(color: Colors.greenAccent, width: 25, height: 25,), onTap: () => print("hmm"), ), Flexible( child: TextField(), ), ], ), ), ], )的{{1}}打算在prefix聚焦时使用。我可以想出一种解决方法，可以检测到TextField的焦点，如果点击了TextField，则无法对其聚焦，下面是一个示例：

TextField

轻按TextField的prefixIcon可使TextField聚焦

2 个答案: