Flutter 零基础学习初探（二）

自定义类方法实现和视图控制器的加载与显示:

void main() => runApp(App());
class MyWidget extends StatelessWidget{
  //渲染界面 build
  @override
//自定义属性 字体颜色 字号 字体加粗呀
  final _textStyle = TextStyle(color: Colors.red,
    fontSize: 40,
  fontWeight: FontWeight.bold);
  Widget build(BuildContext context) {
    // TODO: implement build
    return Center(
      child: Text(
        'Hello Flutter',textDirection: TextDirection.ltr,
        style: _textStyle,
      ),
    );
  }


}
//定义一个类方法 
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //理解为视图控制器容器
    return MaterialApp(
      //home属性
      home:MyWidget() ,
    );
  }
}

这里说个构造自定义类的小技巧 直接输入stl,或者stf，系统会自动生成构造方法：

stl:

class (这里写你的类名) extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}


stf:
class (这里写你的类名) extends StatefulWidget {
  @override
  _State createState() => _State();
}

class _State extends State<> {
  @override
  Widget build(BuildContext context) {
    return Container();
  }
}

下面我们自定义一个我们最常见的视图控制器带导航条的视图控制器：

void main() => runApp(App());
//一个Widget就是一个类
class MyWidget extends StatelessWidget{...}

//定义一个类方法 
class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //理解为视图控制器容器
    return MaterialApp(
      //home属性 带导航条导航控制器
      home:Scaffold(
        //熟悉的感觉（navgationBar）
        appBar: AppBar(
          title: Text('Flutter demo'),
        ),
        body: MyWidget(),
      ) ,
      //修改导航条颜色
      theme: ThemeData(
        primaryColor: Colors.red
      ),
    );
  }
}

上面看有省略号的方法，有个快速缩放的快捷键：command -;选择你需要在大括号那里使用就行了；