Flutter 常见效果实现方式总结

Flutter 可用图标地址

---

Material Icon 跳转地址

下拉刷新

---

使用RefreshIndicator组件实现下拉刷新功能， 一般在 ScrollView 或 ListView 外包一层 RefreshIndicator 组件即可。

基本用法

Future _onRefresh() async {
  // 刷新的逻辑
  print('refresh start =======');
  await Future.delayed(Duration(milliseconds: 2000), () {
    print('refresh end======');
  });
}

@override
Widget build(BuildContext context) {
  return RefreshIndicator(
    onRefresh: _onRefresh,        
    child: SingleChildScrollView(
      child: Container(),
    ),
  );
}

主动触发自动刷新

//自定义 RefreshIndicatorState 组件类型的 Key
final GlobalKey<RefreshIndicatorState> _refresh = GlobalKey();

@override
void initState() {
  super.initState();
  // 此处必须在组件挂载运行的第一帧后执行，否则 _refresh 还没有与组件状态关联起来
  WidgetsBinding.instance.addPostFrameCallback((timeStamp) { 
    // 直接触发下拉刷新的关键代码
    _refreshKey.currentState?.show();
  });
}

Future _onRefresh() async {
  // 刷新的逻辑 
  print('refresh start =======');
  await Future.delayed(Duration(milliseconds: 2000), () {
    print('refresh end======');
  });
}

@override
Widget build(BuildContext context) {
  return RefreshIndicator(
  	//自定义 key，需要通过 key 获取到对应的 State
    key: _refresh,
    onRefresh: _onRefresh,        
    child: SingleChildScrollView(
      child: Container(),
    ),
  );
}

解决页面内容较少时，无法触发下拉刷新问题

给 SingleChildScrollView 组件设置 physics

...

SingleChildScrollView(
  physics: const AlwaysScrollableScrollPhysics(),
  child: Container(),
),

...

在内容少时， 设置SingleChildScrollView充满剩余空间

...
// 第一种方式
SizedBox.expand(
  child: SingleChildScrollView(
    child: Container(),
  ),
),

// 第二种方式
Column(children: [
  Expanded(child: SingleChildScrollView(
    child: Container(),
  ))
])
...

去除滚动布局中蓝半球回弹效果

---

自定义一个behavior

import 'dart:io';

import 'package:flutter/material.dart';

class NoShadowScrollBehavior extends ScrollBehavior {
  @override
  Widget buildOverscrollIndicator(
      BuildContext context, Widget child, ScrollableDetails details) {
    if (Platform.isAndroid || Platform.isFuchsia) {
      return child;
    } else {
      return super.buildOverscrollIndicator(context, child, details);
    }
  }
}

使用ScrollConfiguration组件包裹滚动组件ListView / SingleChildScrollView / ScrollView, 并给ScrollConfiguration组件配置behavior

ScrollConfiguration(
  behavior: NoShadowScrollBehavior(),
  child: ListView(),
),

去掉android顶部状态半透明灰色栏

---

void main() {
  // 主要代码，添加后和去掉android顶部状态半透明灰色栏
  SystemChrome.setSystemUIOverlayStyle(const SystemUiOverlayStyle(
    statusBarColor: Colors.transparent,
  ));

  runApp(MyApp());
}

隐藏右上角Debug标识

---

添加debugShowCheckedModeBanner: false,

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Container(),
    ),
  );
}