Question

我想在TextField中有一个按钮，允许用户返回到上一页。

我认为可以通过两种不同的方式完成此操作：

将按钮堆叠在TextField上方
或使用prefixIcon

遗憾的是，我无法以令人满意的方式实施这两种情况。

prefixIcon方法：

我得到了所需的按钮位置
但是，当用户单击按钮时，键盘会自动弹出一秒钟，然后立即将其关闭。

TextField(
  decoration: new InputDecoration(
    prefixIcon: IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: Icon(
        IconData(58848,
            fontFamily: 'MaterialIcons',
            matchTextDirection: true),
        size: 30,
        color: Colors.orange.withOpacity(1.0),
      ),
    ),
    labelText: "Search",
    labelStyle: TextStyle(fontSize: 20),
    contentPadding:
        EdgeInsets.symmetric(horizontal: 70.0, vertical: 10.0),
  ),
  controller: _searchTextController,
),

Stack方法：

当用户单击“后退”按钮时，键盘不会弹出
如果无法在视觉上近似其位置，就无法使按钮与文本对齐（这会损害响应式设计）

Stack(
  children: [
    TextField(
      decoration: new InputDecoration(
        labelText: "Search",
        labelStyle: TextStyle(fontSize: 20),
        contentPadding: EdgeInsets.symmetric(
            horizontal: 70.0, vertical: 10.0),
      ),
      controller: _searchTextController,
      // onChanged: (String val) => _filterWith(val),
    ),
    IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: Icon(
        IconData(58848,
            fontFamily: 'MaterialIcons',
            matchTextDirection: true),
        size: 30,
        color: Colors.orange.withOpacity(1.0),
      ),
    ),
  ],
),

有什么想法吗？

Answer 1

根据我对您的需求的了解，堆栈方法似乎达到了所需的交互作用，但在视觉上是不正确的。我建议将您的IconButton放置在“定位与对齐”小部件中，如下所示：

Stack(
  children: [
    TextField(
      decoration: new InputDecoration(
        labelText: "Search",
        labelStyle: TextStyle(fontSize: 20),
        contentPadding: EdgeInsets.symmetric(
            horizontal: 70.0, vertical: 10.0),
      ),
      controller: _searchTextController,
      // onChanged: (String val) => _filterWith(val),
    ),


    new Positioned ( child: new Align(
                       alignment: FractionalOffset.centerLeft,
                       child: 


    IconButton(
      onPressed: () {
        Navigator.of(context).pop();
      },
      icon: Icon(
        IconData(58848,
            fontFamily: 'MaterialIcons',
            matchTextDirection: true),
        size: 30,
        color: Colors.orange.withOpacity(1.0),
      ),
    ) // IconButton


    ), // align
   ), // Positioned  

  ],
),

也许还需要对Padding Widget进行一些调整。但是您应该能够实现自己的目标。

TextField内部的后退按钮

1 个答案: