学Flutter的时候写的智障BUG之页面白屏

431 阅读1分钟

啥情况按照Demo写的为啥白屏了?

Demo地址:github.com/XinleiChenJ…

白屏截图
错误的代码:

import 'package:flutter/material.dart';

void main()=>MyApp();

//MyApp不需要做动态处理,所以组件继承StatelessWidget
class MyApp extends StatelessWidget{
  //这个组件是整个应用的主组件
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'StatelessWidget和StatefulWidget例子',
      theme: ThemeData(
        //自定义主题
        primarySwatch: Colors.blue
      ),
      home: MyHomePage(title: '无状态组件和有状态组件的示例'),
    );
  }
}
//主页面需要继承自StatefulWidget
class MyHomePage extends StatefulWidget{
  //标题
  final String title;
  MyHomePage({Key key,this.title}):super(key:key);
  //必须重写createState方法
  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{
  int _count=0;
  void _incrementCounter(){
    //调用State类里面的setState方法更改状态值,使计数器加1
    setState(() {
      //计数器变量,每次点击让其加1
      _count++;
    });
  }
  @override
  Widget build(BuildContext context) {
      return Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
        ),
        //居中布局
        body: Center(
          //垂直布局
          child: Column(
            //主轴居中对齐
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text('你点击右下角按钮的次数'),
              Text(
                '$_count',//绑定计数器的值
                style: Theme.of(context).textTheme.display1,
              )
            ],
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: _incrementCounter,//按下+号按钮调用自增函数
          tooltip: '增加',
          child: Icon(Icons.add),
        ),
      );
  }
}

白屏原因

void main()=>MyApp();

这行代码写错了

解决方法

void main()=>runApp(MyApp());

少写了个runApp函数

总结

main()函数中只有调用runApp()函数才会将给定布局的根组件填满整个屏幕,如果不调用runApp()函数项目也可运行,但是屏幕上会什么都不显示。Flutter是Dart语言的移动应用框架,runApp()是Flutter框架入口,如果不调用runApp(),那就是一个Dart控制台应用。