Flutter带搜索图标的文本输入框

import 'dart:convert';

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(home: _SecondScreen()));
}

class _SecondScreen extends StatelessWidget {
  const _SecondScreen({super.key});

  
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('每日进阶')),
      body: const MyCustomForm(),
    );
  }
}

class MyCustomForm extends StatelessWidget {
  const MyCustomForm({super.key});

  
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 8),
          child: TextField(
            decoration: InputDecoration(
              // contentPadding:EdgeInsets.all(0),
              // contentPadding: EdgeInsets.symmetric(vertical: 4, horizontal: 12), // 设置顶部和底部的内边距为 0
              hintText: '请输入关键词搜索',
              hintStyle: TextStyle(
                color: Colors.grey, // 设置 hint 文字颜色为灰色
                fontSize: 14, // 设置 hint 文字大小
              ),
              // labelText: 'Email',
              suffixIcon: Padding(
                padding: EdgeInsets.only(right: 4),
                child: InkWell(
                  onTap: () {
                    // 这里写你点击后要执行的操作
                    print("Search icon clicked!");
                  },
                  borderRadius: BorderRadius.circular(8.0), // 设置圆角
                  child: Container(
                    padding: EdgeInsets.all(8.0), // 添加内边距
                    decoration: BoxDecoration(
                      color: Colors.blue.withAlpha(100), // 设置背景色为蓝色
                      borderRadius: BorderRadius.circular(8.0), // 圆角效果
                    ),
                    child: Icon(Icons.search, color: Colors.white), // 设置图标颜色为白色
                  ),
                ),
              ),
              // border: const OutlineInputBorder(),
              focusedBorder: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.blue,
                  width: 1.0,
                ), // 聚焦时边框为蓝色
              ),
              enabledBorder: const OutlineInputBorder(
                borderSide: BorderSide(
                  color: Colors.blue,
                  width: 1.0,
                ), // 启用时边框为蓝色
              ),
            ),
          ),
        ),
      ],
    );
  }
}

效果:

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值