Flutter-防京东商城项目-编写搜索控制器搜索框-14

一直觉得自己写的不是技术，而是情怀，一个个的教程是自己这一路走来的痕迹。靠专业技能的成功是最具可复制性的，希望我的这条路能让你们少走弯路，希望我能帮你们抹去知识的蒙尘，希望我能帮你们理清知识的脉络，希望未来技术之巅上有你们也有我。

代码文档

Flutter防京东商城源码(1-10)链接

Flutter防京东商城源码(11-20)链接

Flutter防京东商城源码(21-30)链接

Flutter防京东商城源码(31-46)链接

顶部搜索栏跟搜索页面顶部导航栏效果：

本章学习目标：
1.屏幕封装类，增加一个封装参数
2.自定义导航栏
3.编写搜索控制器搜索框

第一步：把下面的代码写到屏幕封装文件中

static size(double value){
 return ScreenUtil.getInstance().setSp(value);  
}

顶部导航栏机构图：

第二步： 修改主题颜色为白色

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(      
      // home: Tabs(),
      debugShowCheckedModeBanner: false,//是否显示右上角的debug标签---------------------------
      initialRoute: '/search',
      onGenerateRoute:onGenerateRoute,
      //--------------------------------------------
      theme: ThemeData(
        primaryColor: Colors.white
      ),
      //--------------------------------------------
    );
  }
}

第三步：在Tabs.dart里面自定义导航栏

import 'package:flutter_app/services/screenAdaper.dart';

import 'package:flutter_app/services/screenAdaper.dart';

@override
  Widget build(BuildContext context) {
     //重点
    ScreenAdaper.init(context);//--------------------------------------------
    return Scaffold(





//--------------------------------------------    
      appBar: _currentIndex!=3?AppBar(
        leading: IconButton(
          icon: Icon(Icons.center_focus_weak, size: 28, color: Colors.black87),
          onPressed: null,
        ),
        title: InkWell(
          child: Container(
            height: ScreenAdaper.height(68),
            decoration: BoxDecoration(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              borderRadius: BorderRadius.circular(30)
            ),
            padding: EdgeInsets.only(left: 10),
            child: Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                Icon(Icons.search),
                Text("笔记本",style: TextStyle(
                  fontSize: ScreenAdaper.size(28)
                ))
              ],
            ),
          ),
          onTap: (){
              Navigator.pushNamed(context, '/search');

          },
        ),
        actions: <Widget>[
          IconButton(
            icon: Icon(Icons.message, size: 28, color: Colors.black87),
            onPressed: null,
          )
        ],
      ):AppBar(
        title: Text("用户中心"),
      ),
//--------------------------------------------





      body: PageView(
        controller: this._pageController,
        children: this._pageList,


//--------------------------------------------
        onPageChanged: (index) {
          setState(() {
            this._currentIndex = index;
          });
        },
        physics: NeverScrollableScrollPhysics(), //禁止pageView滑动
//--------------------------------------------



      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: this._currentIndex,
        onTap: (index) {
          setState(() {
            this._currentIndex = index;
            this._pageController.jumpToPage(index);
          });
        },
        type: BottomNavigationBarType.fixed,
        fixedColor: Colors.red,
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.home), title: Text("首页")),
          BottomNavigationBarItem(
              icon: Icon(Icons.category), title: Text("分类")),
          BottomNavigationBarItem(
              icon: Icon(Icons.shopping_cart), title: Text("购物车")),
          BottomNavigationBarItem(icon: Icon(Icons.people), title: Text("我的"))
        ],
      ),
    );
  }
}

可以运行看到顶部导航栏的效果。

第四步：在搜索控制器编写搜索框

import 'package:flutter/material.dart';
import 'package:flutter_app/services/screenAdaper.dart';//-------------------------------

class SearchPage extends StatefulWidget {
  SearchPage({Key key}) : super(key: key);

  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {

  @override
  Widget build(BuildContext context) {

	 //重点
	 ScreenAdaper.init(context);//--------------------------------------------

    return Scaffold(


//--------------------------------------------
      appBar: AppBar(
        title: Container(
          child: TextField(
            autofocus: true,
            decoration: InputDecoration(
                border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(30),
                    borderSide: BorderSide.none)),
          ),
          height: ScreenAdaper.height(68),
          decoration: BoxDecoration(
              color: Color.fromRGBO(233, 233, 233, 0.8),
              borderRadius: BorderRadius.circular(30)),
        ),
        actions: <Widget>[
          InkWell(
            child: Container(
              height: ScreenAdaper.height(68),
              width: ScreenAdaper.width(80),
              child: Row(
                children: <Widget>[Text("搜索")],
              ),
            ),
            onTap: (){
         
            },
          )
        ],
      ),
 //--------------------------------------------




     
      body: Text('搜索'),
    );
  }
}