flutter common init 常用Widget初始化

目錄

• Card初始化
• 圓角解決方案
• 自定義Appbar
• TextField 自定義searchBar
• tagView支持自動換行

Card初始化

Card(
        clipBehavior: Clip.antiAlias,
        color: ColorConst.Color_Font_White,
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(8),
        ),
        child:Container(),
      ),

圓角解決方案

ClipRRect
decration
Card

自定義Appbar

import 'package:flutter/material.dart';

class KZAppBar {
  /// 標題widget
  final Widget title;
  /// 是否有返回功能
  final bool canBack;
  final List<Widget> actions;

  KZAppBar({
    this.title,
    this.canBack: true,
    this.actions,
    });

  PreferredSizeWidget build(context) {
    return AppBar(
      title: this.title,
      leading: this.canBack ? GestureDetector(
        onTap: () {
          Navigator.pop(context);
        },
        child: Icon(Icons.arrow_back_ios),
      ):null,
      automaticallyImplyLeading: this.canBack,
      actions: this.actions,
      centerTitle: true,
      elevation: 0.5,
    );
  }
}

//使用 
KZAppBar(
        title: Text('我的收藏'),
      ).build(context),

TextField 自定義searchBar

//默認TextField
TextField(
                controller: _controller,
                textAlign: TextAlign.center,
                keyboardType: TextInputType.number,
                cursorColor: ColorConst.Color_Font_Orange,
                decoration: InputDecoration(
                  border: InputBorder.none, //隱藏下划線
                  contentPadding: EdgeInsets.only(
                      top: -SIZE_SCALE(5), bottom: SIZE_SCALE(15)),
                ),
                onSubmitted: (res) {
                  //點擊了提交
                  print('點擊了完成');
                },
                style: TextStyle(
                  color: ColorConst.Color_Font_Black,
                  fontSize: FONT_SCALE(16),
                ),
              )

//iOS風格TextField
CupertinoTextField(
                  controller: _controller,
                  decoration: BoxDecoration(
                    border: null,
                  ),
                  enabled: widget.enableEditing,
                  placeholder: widget.placeholder,
                  textInputAction: TextInputAction.search,
                  style: TextStyle(
                    color: ColorConst.Color_Font_Black,
                    fontSize: FONT_SCALE(14),
                  ),
                  onSubmitted: (text) {
                    FocusScope.of(context).unfocus();
                    if (widget.enableEditing &&
                        widget.onSearch != null &&
                        _controller.text.trim().length > 0) {
                      //開啟搜索
                      widget.onSearch(_controller.text.trim());
                    }
                  },
                  // onEditingComplete: () {
                  //   print('結束編輯');
                  // },
                )

//自定義searchBar 
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_repairstation/utils/const.dart';
import 'package:flutter_repairstation/utils/scale.dart';

typedef SearchBarClick = Function();
typedef SearchContentBlock = Function(String text);
typedef SearchBarCloseBlock = Function();


class SearchBar extends StatefulWidget {
  /// 默認文字placeholder
  final String placeholder;

  /// 默認文字
  final String text;

  /// 是否可點擊搜索
  final bool enableEditing;

  /// 搜索框被點擊了回調
  final SearchBarClick barClickBlock;

  /// 搜索框被點擊了回調
  final SearchContentBlock onSearch;

  /// 點擊清空
  final SearchBarCloseBlock onClose;

  SearchBar({
    this.text,
    this.placeholder: '搜索',
    this.enableEditing: true,
    this.barClickBlock,
    this.onSearch,
    this.onClose,
  });


  //主動創建state對象並賦值 后面可以使用這個對象賦值內部變量
  _SearchBarState myAppState = _SearchBarState();

  @override
  _SearchBarState createState() => myAppState;

   /// 外部賦值
  void setText(String text){
    //賦值
    myAppState._controller.text = text;
  }
}

class _SearchBarState extends State<SearchBar> {
  TextEditingController _controller = TextEditingController();

  bool _showClose = false;

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  void initState() {
    super.initState();

    _controller.text = widget.text;
    _controller.addListener(() {
      String text = _controller.text;
      setState(() {
        _showClose = (text.length > 0);
      });
    });
    _showClose = (_controller.text.length > 0);
  }

  @override
  Widget build(BuildContext context) {
    return Material(
      color: ColorConst.Color_Clear,
      child: GestureDetector(
        onTap: () {
          /// 點擊回調
          if (!widget.enableEditing && widget.barClickBlock != null) {
            widget.barClickBlock();
          }
        },
        child: Container(
          height: SIZE_SCALE(36),
          child: Row(
            children: <Widget>[
              SizedBox(width: 15),
              Container(
                child: Image.asset(
                  'assets/icon_search.png',
                  height: 17,
                  width: 17,
                  fit: BoxFit.cover,
                ),
              ),
              SizedBox(width:3),
              Expanded(
                child: CupertinoTextField(
                  controller: _controller,
                  decoration: BoxDecoration(
                    border: null,
                  ),
                  enabled: widget.enableEditing,
                  placeholder: widget.placeholder,
                  textInputAction: TextInputAction.search,
                  style: TextStyle(
                    color: ColorConst.Color_Font_Black,
                    fontSize: FONT_SCALE(14),
                  ),
                  onSubmitted: (text) {
                    FocusScope.of(context).unfocus();
                    if (widget.enableEditing &&
                        widget.onSearch != null &&
                        _controller.text.trim().length > 0) {
                      //開啟搜索
                      widget.onSearch(_controller.text.trim());
                    }
                  },
                  // onEditingComplete: () {
                  //   print('結束編輯');
                  // },
                ),
              ),
              SizedBox(width: 10),
              _showClose
                  ? GestureDetector(
                      onTap: () {
                        //清空輸入框內容 同時把事件傳遞出去
                        _controller.text = '';
                        if(widget.onClose != null){
                          widget.onClose();
                        }

                      },
                      child: Image.asset(
                        'assets/icon_close_fill.png',
                        width: SIZE_SCALE(15),
                        height: SIZE_SCALE(15),
                        fit: BoxFit.cover,
                      ),
                    )
                  : Container(),
              SizedBox(width: 10),
            ],
          ),
          decoration: BoxDecoration(
            color: Color(0xFFF6F6F6),
            borderRadius: BorderRadius.circular(SIZE_SCALE(18)),
          ),
        ),
      ),
    );
  }
}

tagView支持自動換行

import 'package:flutter/material.dart';
import 'package:flutter_repairstation/utils/const.dart';
import 'package:flutter_repairstation/utils/scale.dart';

typedef LableClickBlock = Function(String text);

class DiscountView extends StatefulWidget {
  /// 內容列表
  final List<dynamic> list;

  /// 內容文字上下左右間距
  EdgeInsets labelPadding;

  /// 文字樣式
  TextStyle lableStyle;

  /// 背景顏色
  Color labelBackgroundColor;

  /// 圓角度數
  final double radius;

  /// lable橫向間距
  final double spacing;

  /// lable縱向間距
  final double runSpacing;

  final LableClickBlock onTap;

  DiscountView({
    Key key,
    this.list,
    EdgeInsets labelPadding,
    TextStyle lableStyle,
    Color labelBackgroundColor,
    this.radius: 2,
    this.runSpacing: 10,
    this.spacing: 10,
    this.onTap,
  }) : super(key: key) {
    /// 初始化默認值
    this.labelPadding = labelPadding ?? EdgeInsets.fromLTRB(5, 2, 5, 2);
    this.lableStyle = lableStyle ??
        TextStyle(color: Color(0xFFF0441C), fontSize: FONT_SCALE(12));
    this.labelBackgroundColor =
        labelBackgroundColor ?? Color.fromRGBO(254, 237, 233, 1);
  }

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

class _DiscountViewState extends State<DiscountView> {
  @override
  Widget build(BuildContext context) {
    return Material(
      child: Container(
        color: ColorConst.Color_Font_White,
        alignment: Alignment.centerLeft,
        child: Wrap(
          spacing: widget.spacing,
          runSpacing: widget.runSpacing,
          children: widget.list.map((res) {
            int i = widget.list.indexOf(res);
            return GestureDetector(
              onTap: (){
                if(widget.onTap != null){
                  widget.onTap(res);
                }
              },
              child: Container(
              child: Text(
                widget.list[i],
                style: widget.lableStyle,
              ),
              padding: widget.labelPadding,
              decoration: BoxDecoration(
                color: widget.labelBackgroundColor,
                borderRadius: BorderRadius.circular(widget.radius),
              ),
            ),
            );
          }).toList(),
        ),
      ),
    );
  }
}

//使用
DiscountView(list:['滿800送行李箱', '潤滑油', '電瓶', '潤滑油', '電瓶'])