flutter界面组件

接触flutter有快半年了，这期间跟着做了一个flutter项目，作为一个新手，最开始接触的是大量的界面，在这里记录下界面上的一些套用方法和模板,把代码贴进来，以后就能直接copy了(^_)

flutter界面模板

1.Appbar

沉浸式AppBar
这里了留了四个参数，包括一个title和leading2

PreferredSizeWidget transparentAppBar({
  @required BuildContext context,
  Widget title,
  Widget leading,
  List<Widget> actions,
}) {
  return AppBar(
    elevation: 0,
    backgroundColor: Colors.transparent,
    centerTitle: leading == null ? false :true,
    title: title != null
        ? leading == null
        ? Center(
      child: title,
    )
        : title
        : null,
    leading: leading,
    actions: actions,
  );
}

2.底部提示框

修改底下的OutlineButton可以变成多个button,传入全局的context可以实现在任何界面弹出这个框

void buildBottomAlertWidget(BuildContext context, String centerTip,
    String buttonText, Function buttonAction) {
  showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Container(
                  padding: EdgeInsets.all(16),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      SizedBox(
                        height: 60,
                        child: Padding(
                            padding: EdgeInsets.all(16),
                            child: Image.asset("assets/icons/ic_alarm.png")),
                      ),
                      Text(
                        S.current.warning,
                        style: TextStyle(fontSize: 18),
                      ),
                    ],
                  )),
              Container(
                  padding: EdgeInsets.only(bottom: 16), child: Text(centerTip)),
              Container(
                padding: EdgeInsets.all(16),
                width: MediaQuery.of(context).size.width,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    OutlineButton(
                      borderSide: BorderSide(
                        color: Colors.blue,
                      ),
                      onPressed: () {
                        Navigator.pop(context);
                        buttonAction();
                      },
                      child: Text(
                        buttonText,
                        style: TextStyle(color: Colors.blue),
                      ),
                    ),
                  ],
                ),
              )
            ],
          ),
        );
      });
}

3.Dialog弹出框

Future<String> _showChangeNameDialog(
      BuildContext context, AccountSettingViewModel model) {
    return showDialog<String>(
        context: context,
        builder: (context) {
          return AlertDialog(
            title: Text(S.current.changeNickname,
                style: TextStyle(fontSize: 20.sp)),
            content: Container(
              child: TextField(
                maxLength: 10,
                controller: model.nameController,
                decoration: InputDecoration(counterText: ""),
              ),
            ),
            actions: [
              FlatButton(
                  onPressed: () {
                    model.modifyUserName(context, model.nameController.text);
                    NavigatorUtils.goBack(context);
                  },
                  child: Text(S.current.confirm))
            ],
          );
        });
  }
  
  使用
  onTap: () {
        _showChangeNameDialog(context, viewModel);
  }

4.常用的分割线

代码里面分别对应横线和竖线

SizedBox(
          width: double.infinity,
          height: 0.5.h,
          child: DecoratedBox(
            decoration: BoxDecoration(color: AppColors.splitLine),
          ),
        )
        
SizedBox(
              width: 0.5.w,
              height: 25.h,
              child: DecoratedBox(
                decoration: BoxDecoration(color: AppColors.splitLine),
              ),
            )

5.dart中一些用到的时间转化方式

class TimeUtil {
  /// 时间戳转换为当前时间
  static String timeConversion(String time) {
    if (time.length != 13) time = time + "000";
    DateTime createTime = DateTime.fromMillisecondsSinceEpoch(int.parse(time));
    return DateFormat('Hm').format(createTime);
  }

  /// 当前时间转换为时间戳  13位
  static int getTimestamp(DateTime time) {
    return time.microsecondsSinceEpoch;
  }

  /// 获得剩余时间
  static int getTimeLeft(int timeEpoch) {
    int leftTime = timeEpoch - DateTime.now().microsecondsSinceEpoch ~/ 1000000;
    return leftTime;
  }

  /// 获得当前时间的Hm格式  （18：00）
  static String now() {
    return DateFormat('Hm').format(DateTime.now());
  }
}

6.去掉flutter滚动组件中的蓝色波浪

参考 https://segmentfault.com/a/1190000021034746?utm_source=tag-newest

导入io包和基础的material的包
import 'dart:io';
import 'package:flutter/services.dart';

用ScrollConfiguration包裹滑动子布局:
ScrollConfiguration(
    behavior: MyBehavior(),  //自定义behavior
    child: ListView()  //你的滚动布局组件
);

自定义behavior:
class MyBehavior  extends ScrollBehavior{
 @override
 Widget buildViewportChrome(BuildContext context, Widget child, AxisDirection axisDirection) {
    if(Platform.isAndroid||Platform.isFuchsia){
     return child;
  }else{
    return super.buildViewportChrome(context,child,axisDirection);
    }
 }
}