flutter入门之基本widget

作者: waiwaaa | 来源:发表于2020-04-10 14:39 被阅读0次

flutter入门之基本widget
Flutter 组件分析之SafeArea
Flutter开发--基础组件
Flutter布局入门
Flutter学习资源整理
Flutter笔记-深入分析Widget 1
（六）flutter入门之widget解惑
Flutter入门04 -- Widget之StatelessW
2、Flutter常用Widget
flutter笔记汇总

flutter中，对应的显示对象都是一个个对应的widget，不仅包含原生中对应的text,button等，还有布局对应的Center,Row,Cloumn等。
一般我们新建一个正常的交互页面，从下面这几个开始

类型	作用特点
MaterialApp	一般作为APP顶层的主页入口，可配置主题，多语言，路由等
Scaffold	一般用户页面的承载Widget，包含appbar、snackbar、drawer等material design的设定。
Appbar	一般用于Scaffold的appbar ，内有标题，二级页面返回按键等，当然不止这些，tabbar等也会需要它。
StatelessWidget	继承 StatelessWidget，通过 build 方法返回一个布局好的控件
StatefulWidget	有状态的widget的简单实现，你需要创建管理的是主要是 State ，通过 State 的 build 方法去构建控件

import 'package:flutter/material.dart';
void main()=>runApp(MyApp());

class MyApp extends StatelessWidget{
  @override
  Widget build(BuildContext context){
    return MaterialApp(
      title:"welcome",
      theme: ThemeData.dark(),//设置主题
      home: Scaffold(
        appBar:AppBar(title:Text("first1")),
        body:Center(
        child: ContentWidget(),
      ),
      ),
      
    );
  }
}

class ContentWidget extends StatefulWidget {
  ContentWidget({Key key}) : super(key: key);
  @override
  _ContentWidgetState createState() => _ContentWidgetState();
}

class _ContentWidgetState extends State<ContentWidget> {
  int num=0;
  @override
  Widget build(BuildContext context) {
    return Container(
       child: MaterialButton(
         color: Colors.amber,
         child: Text('$num'),
         onPressed: (){
            setState(() {
              num++;
            });
         },
       ),
    );
  }
}

常用的控件

类型	作用特点
Text	显示文本，几乎都会用到，主要是通过style设置TextStyle来设置字体样式等。
RichText	富文本，通过设置TextSpan，可以拼接出富文本场景。
TextField	文本输入框：new TextField(controller: //文本控制器, obscureText: "hint文本");
Image	图片加载: new FadeInImage.assetNetwork( placeholder: "预览图", fit: BoxFit.fitWidth, image: "url");
FlatButton	按键点击: new FlatButton(onPressed: () {},child: new Container());

Flutter 布局

Flutter 中拥有需要将近30种内置的布局Widget

类型	作用特点
Container	只有一个子 Widget。默认充满，包含了padding、margin、color、宽高、decoration 等配置。
Padding	只有一个子 Widget。只用于设置Padding，常用于嵌套child，给child设置padding。
Center	只有一个子 Widget。只用于居中显示，常用于嵌套child，给child设置居中。
Stack	可以有多个子 Widget。子Widget堆叠在一起。
Column	可以有多个子 Widget。垂直布局。
Row	可以有多个子 Widget。水平布局。
Expanded	只有一个子 Widget。在 Column 和 Row 中充满。
ListView	可以有多个子 Widget。自己意会吧。