京东7 头部搜索导航布局

weixin_38107457

已于 2022-02-19 23:11:58 修改

阅读量642

点赞数

分类专栏： flutter 文章标签： android javascript java

于 2022-02-19 22:14:08 首次发布

本文链接：https://blog.csdn.net/weixin_38107457/article/details/123024813

版权

flutter 专栏收录该内容

68 篇文章 3 订阅

订阅专栏

这篇博客展示了如何在 Flutter 应用中实现首页、分类、购物车页面的搜索导航布局，以及搜索页面的顶部布局。在 appBar 中，根据当前页面状态动态设置不同样式，包括图标、文本和操作按钮。在搜索页面，使用 TextField 实现搜索框，并提供了热搜和历史记录展示，同时包含清空历史记录的功能。

摘要由CSDN通过智能技术生成

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(onPressed: null, icon: Icon(Icons.message,size: 28,color: Colors.black87))
        ],
      ):AppBar(
        title: Text("用户中心"),
      ),

Flutter 首页、分类、购物车页面搜索导航布局

搜索页面顶部布局

import 'package:flutter/material.dart';
import 'package:fultter/flutter_jdshop/services/ScreenAdaper.dart';
class SearchPage extends StatefulWidget {
  //const SearchPage({Key? key}) : super(key: key);

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext 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: [
          InkWell(
            child: Container(
              height: ScreenAdaper.height(68),
              width: ScreenAdaper.width(80),
              child: Row(
                children: [
                  Text("搜索")
                ],
              ),
            ),
            onTap: (){},
          )
        ],
      ),
      body: Text("搜索"),
    );
  }
}

import 'package:flutter/material.dart';
import 'package:fultter/flutter_jdshop/services/ScreenAdaper.dart';
class SearchPage extends StatefulWidget {
  //const SearchPage({Key? key}) : super(key: key);

  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {
  @override
  Widget build(BuildContext 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: [
          InkWell(
            child: Container(
              height: ScreenAdaper.height(68),
              width: ScreenAdaper.width(80),
              child: Row(
                children: [
                  Text("搜索")
                ],
              ),
            ),
            onTap: (){},
          )
        ],
      ),
      body: Container(
        padding: EdgeInsets.all(10),
        child: ListView(
          children: [
            Container(
              child: Text("热搜",style: Theme.of(context).textTheme.subtitle1,),
            ),
            Divider(),
            Wrap(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(233, 233, 233, 0.9),
                    borderRadius: BorderRadius.circular(10)
                  ),
                  child: Text("女装"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("女装"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("笔记本电脑"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("女装111"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("女装"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("女装"),
                ),
                Container(
                  padding: EdgeInsets.all(10),
                  margin: EdgeInsets.all(10),
                  decoration: BoxDecoration(
                      color: Color.fromRGBO(233, 233, 233, 0.9),
                      borderRadius: BorderRadius.circular(10)),
                  child: Text("女装"),
                )
              ],
            ),
            SizedBox(height: 10),
            Container(
              child: Text("历史记录", style: Theme.of(context).textTheme.subtitle1),
            ),
            Divider(),
            Column(
              children: <Widget>[
                ListTile(
                  title: Text("女装"),
                ),
                Divider(),
                ListTile(
                  title: Text("女装"),
                ),
                Divider(),
                ListTile(
                  title: Text("男装"),
                ),
                Divider(),
                ListTile(
                  title: Text("手机"),
                ),
                Divider(),
                ListTile(
                  title: Text("鞋子"),
                ),
                Divider(),
              ],
            ),
            SizedBox(height: 100),
            InkWell(
              onTap: (){

              },
              child: Container(
                width: ScreenAdaper.width(400),
                height: ScreenAdaper.height(64),
                decoration: BoxDecoration(
                    border: Border.all(color: Colors.black45, width: 1)),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[Icon(Icons.delete), Text("清空历史记录")],
                ),
              ),
            )
        ],

        ),
      )
    );
  }
}