Flutter 사용자 정의 Appbar 검색 상자 효과

본 논문 의 사례 는 Flutter 사용자 정의 Appbar 검색 상자 효과 의 구체 적 인 코드 를 공유 하 였 으 며,구체 적 인 내용 은 다음 과 같 습 니 다.
우선 이번 실현 의 효 과 를 살 펴 보 자.

직접 게 으 름 을 피 우 고 flutter pub 에서 사용 할 수 있 는 것 을 찾 아 사용 하려 고 했 으 나 보 니 현재 ui 와 효과 가 크게 다 르 기 때문에 스스로 하 나 를 실현 하기 로 결정 했다.전체적으로 말 하면 간단 해 요.원래 연습 을 위해 서 만 든 거 예요.
status bar 의 높이 를 편리 하 게 처리 하기 위해 Appbar 에 직접 의존 하여 이 루어 졌 습 니 다.그러면 상태 표시 줄 을 처리 하지 않 아 도 됩 니 다.

class _HotWidgetState extends State<HotWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        titleSpacing: 0,  //  title  padding，          padding  
        toolbarHeight: 44, //     44，      。      ，
        //      flutter_screenutil        
        backgroundColor: Colors.white,
        elevation: 0,
        //  title       widget，              widget。
        title: SearchAppBar(
          hintLabel: "  /   /  ",
        ),
      ),
      body: Container(),
    );
  }
}

flutter 에서 컨트롤 정 의 는 조합 컨트롤 로 이 루어 지 는 것 을 추천 합 니 다.이것 은 정말 멋 있 습 니 다.만물 이 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;

  ///  TextField    
  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();
  }
}

마지막 으로 미관 을 위해 서 는 상태 표시 줄 도 투명 하 게 만들어 야 한다.

void main() {
  //        
  WidgetsFlutterBinding.ensureInitialized();
  SystemChrome.setPreferredOrientations([DeviceOrientation.portraitUp])
      .then((_) {
    runApp(const MyApp());
  });
  //       
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = const SystemUiOverlayStyle(
      statusBarColor: Colors.transparent, //     
    );
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.