flutter 如何写一个搜索功能的输入框

2022-03-15 249 阅读1分钟

先上效果图：

TextField(
  controller: controller,
  cursorColor: Theme.of(context).primaryColor,
  cursorHeight: 16,
  textAlignVertical: TextAlignVertical.center,
  // 这里很重要，如何设置了光标的高度cursorHeight，则必须要设置这个，要不然会出现不对齐的情况
  style: TextStyle(
    height: 1.2
  ),
  decoration: InputDecoration(
    hintText: 'Search asset',
    hintStyle: TextStyle(
      color: Colors.grey
    ),
    prefixIcon: Icon(Icons.search, color: Colors.grey),
    contentPadding: EdgeInsets.zero,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(12)),
    ),
    // 点击的边框样式
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.all(Radius.circular(12)),
      borderSide: BorderSide(
        color: Colors.grey
      )
    )
  )
)

如果不加入style的参数将会是这样（光标对不齐）：