Flutter - 导航栏搜索框实现

demo 地址: https://github.com/iotjin/jh_flutter_demo

效果图:

在这里插入图片描述

代码

import 'package:flutter/material.dart';
import 'package:jh_flutter_demo/configs/colors.dart';
import 'package:jh_flutter_demo/JhTools/JhForm/jhLoginTextField.dart';


class SearchTest3Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {


    return Scaffold(
      appBar:

//      cursorColor: Colors.white, //设置光标
      AppBar(
        backgroundColor: kThemeColor,
        titleSpacing:15,
        automaticallyImplyLeading: false,//隐藏返回箭头
        title:
        Container(
          decoration: new BoxDecoration(
            border: Border.all(color: Colors.grey, width: 1.0), //灰色的一层边框
            color: Colors.white,
            borderRadius: BorderRadius.all( Radius.circular(5.0)),
          ),
          alignment: Alignment.center,
          height: 38,
//           padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0),
          child: JhLoginTextField(
            leftWidget: Icon(Icons.search,size: 30,),
            hintText: '请输入搜索信息',
            isShowDeleteBtn: true,
            isDense: true,
          ),
        ),
        actions: <Widget>[

          InkWell(
            child:
            Container(width: 50,height: 50,
              child:  Center(child:
              Text("搜索"),
              ),
            ),

            onTap: () {
            },
          )


        ],
      ),
      body:
      RaisedButton(child: Text("返回"),
        onPressed: (){
          Navigator.pop(context);
        },
      ),

    );
  }



}
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值