技術標籤：Flutter

Flutter自定義搜尋框，解決字型不劇中的問題

效果
高度為40的時候顯示：

高度為60顯示的

高度為30的顯示

程式碼如下，
建立一個SearchBar.dart檔案，吧下面的程式碼複製進去就可以了

import 'package:flutter/material.dart';

class SearchBar extends PreferredSize {
  TextEditingController controller; //輸入控制器
  FocusNode focusNode; //焦點
  String hint; //提示的文字
  TextStyle hintStyle; //提示文字的樣式
  double width; //輸入框的寬
  double height; //高
  // Widget startIcon; //前面顯示的圖示
  Widget endIcon; //後面顯示的圖示
  // bool isShowStartIcon; //是否顯示前面的圖示  預設不顯示
  bool isShowEndIcon; //是否顯示後面的圖示
  double radius; //圓角
  Color bgColor; //背景顏色
  double endIconPadding; //右邊圖示距離右邊的距離
  double startIconPadding; //左邊圖示距離左邊的距離

  ValueChanged<String> onChanged;
  ValueChanged<String> onSubmitted;

  SearchBar(
      {@required this.controller,
      this.onChanged,
      this.onSubmitted,
      @required this.focusNode,
      this.hintStyle,
      this.hint,
      this.width: 200,
      this.height: 40,
      this.endIcon,
      // this.startIcon,
      this.isShowEndIcon: true,
      // this.isShowStartIcon: false,
      this.radius: 25,
      this.bgColor,
      this.endIconPadding: 12,
      this.startIconPadding: 10});

  buildWidget() {
    return Container(
        height: height,
        decoration: BoxDecoration(
            color: bgColor, borderRadius: BorderRadius.circular(radius)),
        child: Container(
          child: Stack(
            alignment: Alignment.centerLeft,
            children: [
              Container(
                margin: EdgeInsets.only(
                  left: startIconPadding,
                ),
                child: Text(
                  hint,
                  style: hintStyle,
                ),
              ),
              Container(
                alignment: Alignment.centerLeft,
                padding: EdgeInsets.only(left: 10),
                child: Opacity(
                  opacity: 1,
                  child: EditableText(
                    controller: controller,
                    cursorWidth: 2,
                    focusNode: focusNode,
                    style: TextStyle(
                      fontSize: 14,
                    ),
                    onChanged: onChanged,
                    onSubmitted: onSubmitted,
                    cursorColor: Colors.grey,
                    backgroundCursorColor: Colors.grey,
                  ),
                ),
                width: width,
              ),
              isShowEndIcon
                  ? Positioned(
                      child: Container(
                        margin: EdgeInsets.only(right: endIconPadding),
                        child: endIcon,
                      ),
                      right: 0,
                    )
                  : Container()
            ],
          ),
        ));
  }

  @override
  Widget build(BuildContext context) {
    return buildWidget();
  }
}

 

使用方法：

 SearchBar(
                      controller: TextEditingController(),
                      focusNode:FocusNode(),
                      width: 200,
                      height: 30,
                      bgColor: Colors.white12,
                      endIcon: Opacity(opacity: 0.8,child:Image.asset('assets/images/search.png',color: Colors.white,),),
                      hintStyle: TextStyle(
                          fontSize: 12,
                          color: Colors.grey[400]
                      ),
                      hint:"請輸入書籍名稱",
                      onChanged: (val){
                        model.onChanged(val);
                      },
                    )
 

需要在onchanged的時候進行判斷

  onChanged(val){
    if(val.length>0){
      searchHint='';
    }else{
      searchHint=Constants.searchHint;
    }
    notifyListeners();
  }

謝謝觀看