flutter笔记-万物皆是widget

文章目录

• helloFlluter
• 自定义Widget
• • 优化

这篇文章后就不见写了，学flutter主要是为了更好的使用 flutter-webrtc，所以到这里基本就了解了大部分的知识，后续边用边查；
在flutter中所有的view都叫widget，类似文本组件Text也是集成自widget;

helloFlluter

创建第一个项目如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main()=>runApp(
    Center(
     child:  Text(
        "Hello world!!",
        textDirection: TextDirection.ltr,
        style: TextStyle(
            fontSize: 20,
            color: Colors.orange
        ),
      ),
    )
);

runApp传入的参数就是一个Widget；所以我们可以传入Text，示例中的Center类也是继承自Widget；

或者我们可以直接使用MaterialApp类去创建Material风格的应用；

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
    debugShowMaterialGrid: false,
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("first app"),
      ),
      body: Text(
        "Hello world!!",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 20, color: Colors.orange),
      ),
    )));

如图：

自定义Widget

自定义一个需要以下两步骤：

1. 定义类继承自自己要实现的widget
2. 实现必须要实现的方法build方法；
   例如如下示例：

class LYMHomePage extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    throw UnimplementedError();
  }
}

其中的build是有flutter自动调用；

优化

在上面的示例main中的调用比较多，这显然不适合项目开发，所以初步优化如下：

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

class LYMApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowMaterialGrid: false,
        debugShowCheckedModeBanner: false,
        home: LYMScaffold());
  }
}

class LYMScaffold extends StatelessWidget{
   @override
  Widget build(BuildContext context) {
    return Scaffold(
       appBar: AppBar(
         title: Text("first app"),
       ),
       body:LYMContainerBody(),
     );
  }
}
class LYMContainerBody extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return  const Text(
      "Hello world!!",
      textDirection: TextDirection.ltr,
      style: TextStyle(fontSize: 20, color: Colors.orange),
    );
  }
}

优化原则：因为MaterialApp是Material风格的框架是固定的，如果需要自定义其home也，那那种之前类似view，我们可以自定义view继承自widget实现；

其次Scaffoldhi一个脚手架，也就是相当于iOS中UIViewController；那么我们也可能将其中的body部分分离出来方便自定义实现；

需要注意的是所有的Widget类的状态都是不可改变的所以我们不能再代码里去修改按钮的状态，所以需要单独一个类去记录状态；所以优化如下：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

class LYMApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        debugShowMaterialGrid: false,
        debugShowCheckedModeBanner: false,
        home: LYMScaffold());
  }
}

class LYMScaffold extends StatelessWidget{
   @override
  Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Center( // 添加 Center widget
           child: Text("first app"),
         ),
       ),
       body: LYMContentody(),
     );
  }
}
/*flag 状态     Stateful 不能定义状态*/
class LYMContentody extends StatefulWidget{
  @override
   State<StatefulWidget> createState() {
     return _LYMContentBodyState();
   }


}
class _LYMContentBodyState extends State<LYMContentody> {
  bool flag = true;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Checkbox(
            value: flag,
            onChanged: (newValue) {
              // 在改变状态前检查newValue是否为null，尽管当前上下文预期为非null
              if (newValue != null) {
                setState(() {
                  flag = newValue;
                });
              }
            },
          ),
          const Text("同意协议"),
        ],
      ),
    );
  }
}