Flutter|知识整理-helloworld及同意协议（二）

发酵的面粉团子
460 阅读4分钟

1.Flutter 项目结构认识

image.png

  • dart_tool :dart 依赖第三方库 ，第三方库下载下来后会有dart_tool
  • .idea androidStudio 是Google基于IDEA 开发 ，对当前的 项目做一些配置
  • Android: 安卓的工程
  • iOS : 对应的iOS 工程
  • Lib: 我们的文件都放在这
  • Main.dart : 作为flutter启动入口
  • .gitignore: git忽略文件
  • .metadata: 看当前有哪些执行能力
  • Pubspec.lock .yaml 依赖文件

// 一句语句结束用 ； 没有结束用，

//去掉右边的debug 标签

命名可选参数 {}

Flutter 中 所有的widget都不可以写状态

2. Hello World

import 'package:flutter/material.dart';
​
main(List<String> args) {
  runApp(Text("Hello World", textDirection: TextDirection.ltr));
}
​
  • 运行结果

image.png

  • Dart程序的入口都是main函数
  • runApp是Flutter内部提供的一个函数，当我们启动一个Flutter应用程序时就是从调用这个函数开始的

  • Widget到底什么东西呢？

    我们学习Flutter，从一开始就可以有一个基本的认识：Flutter中万物皆Widget（万物皆可盘）；

    在我们iOS或者Android开发中，我们的界面有很多种类的划分：应用（Application）、视图控制器（View Controller）、活动（Activity）、View（视图）、Button（按钮）等等；

    但是在Flutter中，这些东西都是不同的Widget而已；

    也就是我们整个应用程序中所看到的内容几乎都是Widget，甚至是内边距的设置，我们也需要使用一个叫Padding的Widget来做；

3. 改进界面样式A

import 'package:flutter/material.dart';
​
main(List<String> args) {
  runApp(
    Center(
      child: Text(
        "Hello World",
        textDirection: TextDirection.ltr,
        style: TextStyle(fontSize: 36),
      ),
    )
  );
}
​

运行结果

image.png

4.样式改造B

import 'package:flutter/material.dart';
​
void main(List<String> args) {
  runApp(MyApp());
}
​
class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Flutter AppBar")),
        body: Center(
          child: Text('Hello world'),
        ),
      ) ,
    );
  }
}

运行结果

image.png

  • 在最外层包裹一个MaterialApp

    这意味着整个应用我们都会采用MaterialApp风格的一些东西，方便我们对应用的设计，并且目前我们使用了其中两个属性；

    home：是该应用启动时显示的页面，我们传入了一个Scaffold；

  • Scaffold是什么呢？

    翻译过来是脚手架，脚手架的作用就是搭建页面的基本结构；所以我们给MaterialApp的home属性传入了一个Scaffold对象，作为启动显示的Widget；Scaffold也有一些属性，比如appBar和body；appBar是用于设计导航栏的，我们传入了一个title属性；body是页面的内容部分，我们传入了之前已经创建好的Center中包裹的一个Text的Widget；

5. 代码重构

  • 如何创建自己的Widget呢？

    在Flutter开发中，我们可以继承自StatelessWidget或者StatefulWidget来创建自己的Widget类；

    StatelessWidget： 没有状态改变的Widget，通常这种Widget仅仅是做一些展示工作而已；

    StatefulWidget： 需要保存状态，并且可能出现状态改变的Widget；

import 'package:flutter/material.dart';
​
// void main() {
//   runApp(
//     _MyAPP()
//   );
// }
void main() => runApp( _MyAPP());
 
class _MyAPP extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:  HomePage()
    );
  }
}
class HomePage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
          title: Text("你好"),
        ),
        body:  HomeBody()
      );
  }
}
​
class HomeBody extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return   Center(
          child: Text(
            "helloWorld 111 2",
            textDirection: TextDirection.ltr,
          ),
        ) ;
  }
}

我们来看一下创建一个StatelessWidget的格式：

1、让自己创建的Widget继承自StatelessWidget；

2、StatelessWidget包含一个必须重写的方法：build方法；

class MyStatelessWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return <返回我们的Widget要渲染的Widget，比如一个Text Widget>;
  }
}

build方法的解析：

Flutter在拿到我们自己创建的StatelessWidget时，就会执行它的build方法；

我们需要在build方法中告诉Flutter，我们的Widget希望渲染什么元素，比如一个Text Widget；

StatelessWidget没办法主动去执行build方法，当我们使用的数据发生改变时，build方法会被重新执行；

  • build方法什么情况下被执行呢？

1、当我们的StatelessWidget第一次被插入到Widget树中时（也就是第一次被创建时）；

2、当我们的父Widget（parent widget）发生改变时，子Widget会被重新构建；

3、如果我们的Widget依赖InheritedWidget的一些数据，InheritedWidget数据发生改变时；

6 有状态widget

 
​
import 'package:flutter/material.dart';
​
void main() => runApp( _MyAPP());
 
class _MyAPP extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      home:  HomePage()
    );
  }
}
class HomePage extends StatelessWidget{
  @override 
  Widget build(BuildContext context){
    return Scaffold(
        appBar: AppBar(
          title: Text("你好"),
        ),
        body:  HomeBodyContent()
      );
  }
}
​
//此处无状态widget
class HomeBody extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return   Center(
          child: Row(
            children: [
              Checkbox(value: true, onChanged: (value)=>print(value)),
              Text("同意协议",style: TextStyle(fontSize: 20),)
            ],
          ),
        ) ;
  }
}
​
//有状态 widget   因所有的widget都是无状态的 ，所以需要新建一个状态类 
class HomeBodyContent extends StatefulWidget{
  @override
  State<HomeBodyContent> createState() {
    return HomeBodyContentState();
  }
}
​
class HomeBodyContentState extends State<HomeBodyContent>{
  var flag = false;
  @override
  Widget build(BuildContext context) {
     return   Center(
          child: Row(
            children: [
              Checkbox(
                value: flag, 
                onChanged: (value){
                  setState(() {
                    flag = value!;
                  });
                }
                ),
              Text("同意协议",style: TextStyle(fontSize: 20),)
            ],
          ),
        ) ;
  }
}

image.png

state的生命周期 book.flutterchina.club/chapter2/fl…

avatar
文章
阅读
粉丝