flutter实用技巧汇总

2018-08-28 185 words One minute

Contents

bottomNavigationBar TabBar Navigator等 使用这些控件时，可能出现跳转后bottomNavigationBar还保留在底部的情况。截止本文发布为止，目前Flutter开发工具还是有一些莫名其妙的问题的。如果你一直用iOS模拟器调试，发现有些奇葩问题怎么改代码都没效果，不妨切换成android模拟器试试，反之亦然。

获取设备宽高

double width = MediaQuery.of(context).size.width;
double height = MediaQuery.of(context).size.height;

标题栏沉浸式

void main() {
  runApp(App());
  if (Platform.isAndroid) {
    SystemUiOverlayStyle systemUiOverlayStyle = SystemUiOverlayStyle(statusBarColor: Colors.transparent);
    SystemChrome.setSystemUIOverlayStyle(systemUiOverlayStyle);
  }
}

AppBar标题居中和去掉AppBar下侧阴影

Widget _tabbar(BuildContext context) {
    return AppBar(
      ...
      centerTitle: true, // 标题居中
      elevation: 0.0, // 去掉appbar下面的阴影
    );
  }

有状态组件一定要使用createState

class HomeScreen extends StatefulWidget {
  const HomeScreen();

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

class _HomeScreenState extends State<HomeScreen> with SingleTickerProviderStateMixin {
  // 使用TickerProvider 记得加 with SingleTickerProviderStateMixin 不然会报错
}

使用ios的动画交互和 MaterialApp 主题颜色配置不生效的问题 检查是否存在子级MaterialApp。如果有子级MaterialApp请删除，保证全局只有一个MaterialApp，theme就会生效

class App extends StatelessWidget {
  final store = createStore();
  // App();

  @override
  Widget build(BuildContext context) {
    return StoreProvider<AppState>(
      store: createStore(),
      child: MaterialApp(
        theme: ThemeData(
          platform: TargetPlatform.iOS, // 使用ios的界面动画方式
          primaryColor: Colors.red, // 应用主要部分的背景颜色（工具栏，标签栏等）
          accentColor: Colors.red, // 前景色：旋钮，文本，过度滚动边缘效果等
        ),
        routes: <String, WidgetBuilder>{
          '/': (BuildContext context) => HomeScreen(),
        },
      ),
    );
  }
}

async和await

 //HTTP的get请求返回值为Future<String>类型，即其返回值未来是一个String类型的值
  getData() async {    //async关键字声明该函数内部有代码需要延迟执行
    return await http.get(Uri.encodeFull(url), headers: {"Accept": "application/json"}); //await关键字声明运算为延迟执行，然后return运算结果
  }

Future

 funA(){
  ...set an important variable...    //设置变量
}

funB(){
  ...use the important variable...   //使用变量
}
main(){
  new Future.then(funA()).then(funB());   // 明确表现出了后者依赖前者设置的变量值
 
  new Future.then(funA()).then((_) {new Future(funB())});    //还可以这样用

  //链式调用，捕获异常
  new Future.then(funA(),onError: (e) { handleError(e); }).then(funB(),onError: (e) { handleError(e); })  
}

参考资料： https://www.shifeng1993.com/2018/07/12/flutter_dev/ https://segmentfault.com/a/1190000014396421