Flutter自定義Appbar搜索框效果

更新時間：2021年06月23日 14:56:12 作者：飄渺包子

這篇文章主要為大家詳細介紹了Flutter自定義Appbar搜索框，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了Flutter自定義Appbar搜索框效果的具體代碼，供大家參考，具體內(nèi)容如下

首先看一下實現(xiàn)本次實現(xiàn)的效果。

本來想直接偷懶從flutter pub上找個能用的使用起來，但是看了下發(fā)現(xiàn)都與目前ui效果相差很大，于是乎決定自己實現(xiàn)一個。整體的話比較簡單，本來也是為了練手而做的。

為了方便處理statusbar的高度適配，于是乎直接依托于Appbar進行了實現(xiàn)，這樣就可以不用處理狀態(tài)欄適配了。

class _HotWidgetState extends State<HotWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,  //清除title左右padding，默認情況下會有一定的padding距離
        toolbarHeight: 44, //將高度定到44，設(shè)計稿的高度。為了方便適配，
        //推薦使用插件flutter_screenutil做屏幕的適配工作
        backgroundColor: Colors.white,
        elevation: 0,
        //由于title本身是接受一個widget，所以可以直接給他一個自定義的widget。
        title: SearchAppBar(
          hintLabel: "電影/電視劇/影人",
        ),
      ),
      body: Container(),
    );
  }
}

flutter中控件定義推薦的是使用組合控件實現(xiàn)，這個是真的很酷，因為萬物皆widget，組合起來很方便。

import 'package:flutter/material.dart';
import 'package:flutter_demo_001/ui.theme/color.dart';
import 'package:flutter_demo_001/ui.theme/theme.dart';
import 'package:flutter_demo_001/utils/padding.dart';

class SearchAppBar extends StatefulWidget {
  SearchAppBar({Key? key, required this.hintLabel}) : super(key: key);

  final String hintLabel;

  @override
  State<StatefulWidget> createState() {
    return SearchAppBarState();
  }
}

class SearchAppBarState extends State<SearchAppBar> {
  late FocusNode _focusNode;

  ///默認不展示控件

  bool _offstage = true;

  ///監(jiān)聽TextField內(nèi)容變化
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
    _focusNode = FocusNode();
    _textEditingController.addListener(() {
      var isVisible = _textEditingController.text.isNotEmpty;
      _updateDelIconVisible(isVisible);
    });
  }

  _updateDelIconVisible(bool isVisible) {
    setState(() {
      _offstage = !isVisible;
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: double.infinity,
      height: 30,
      child: Row(
        children: [
          Expanded(
            flex: 1,
            child: Container(
              height: double.infinity,
              margin: const EdgeInsets.only(left: 16),
              decoration: BoxDecoration(
                  color: colorF5F6FA, borderRadius: BorderRadius.circular(4)),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.center,
                children: [
                  paddingOnly(const EdgeInsets.only(left: 8)),
                  Image.asset(
                    "images/home_search.png",
                    width: 16,
                    height: 16,
                  ),
                  paddingOnly(const EdgeInsets.only(left: 8)),
                  Expanded(
                    flex: 1,
                    child: TextField(
                      controller: _textEditingController,
                      autofocus: true,
                      focusNode: _focusNode,
                      style: TextStyle(fontSize: 14, color: color333),
                      decoration: boxInputDecoration(widget.hintLabel),
                      maxLines: 1,
                    ),
                  ),
                  paddingOnly(const EdgeInsets.only(right: 8)),
                  Offstage(
                    offstage: _offstage,
                    child: GestureDetector(
                      onTap: () => {_textEditingController.clear()},
                      child: Image.asset(
                        "images/home_search_cancel.png",
                        width: 16,
                        height: 16,
                      ),
                    ),
                  ),
                  paddingOnly(const EdgeInsets.only(right: 8)),
                ],
              ),
            ),
          ),
          GestureDetector(
            onTap: () {
              _focusNode.unfocus();
            },
            child: Container(
              padding: const EdgeInsets.only(left: 16, right: 16),
              child: Text("取消",
                  style: TextStyle(fontSize: 16, color: Color(0xFF3D7DFF))),
            ),
          ),
        ],
      ),
    );
  }

  @override
  void dispose() {
    super.dispose();
    _focusNode.unfocus();
  }
}

最后為了美觀，需要讓狀態(tài)欄也變成透明。

void main() {
  //固定屏幕旋轉(zhuǎn)方向
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(const MyApp());
  });
  //設(shè)置狀態(tài)欄透明
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //設(shè)置為透明
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: