StatelessWidget与基础组件

1、

在flutter里面，一切皆组件，在组件里面撑起flutter半边天的一个是无状态StatelessWidget组件，一个是有状态的StatefulWidget组件

2、

 

container:容器组件

Text:文本组件

Icon:图标组件

CloseButton:关闭按钮的组件

BackButton:返回按钮的组件

Chip:材料设计中非常有趣的一个组件

Divider：分割线的组件

Card：卡片状的容器组件

AlertDialog:一个弹框的组件

 

StateLessWidget是flutter里面一个不需要状态改变的widget，也就是说它内部没有需要管理的状态。StateWidget不需要根据自己的状态来改变它的一些渲染。它最大的特点是不依赖自身的状态来改变自己

3、

Container继承自StatelessWidget,是StatelessWidget的一个实现类，

 

它是一个容器组件，可以通过它来约束它里面的child，也就是子节点。

alignment：设置居中方式

padding:内边距

Color color：颜色

Decoration decoration:装饰器，通过装饰器可以设置它的圆角、背景、渐变色和其它的一些属性

foregroundDecoration:背景

width:宽度

height：高度

 

 

containner的用法：

 

4、

text的使用方式

5、

icon的使用方式

6、

关闭按钮和返回按钮

7、

Chip组件：

8、

Divider

9、

Card：

四周圆角、有背景、有阴影

10、

弹框：四周圆角、有个阴影

 

11、

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

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

//StateLessWidget与基础组件
class LessGroupPage extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    TextStyle textStyle=TextStyle(fontSize: 20);
    return MaterialApp(
      title: 'StatelessWidget与基础组件',
      theme: ThemeData(

        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(title: Text('StatelessWidget与基础组件')),
        body: Container(
          decoration: BoxDecoration(color: Colors.blue),
          alignment: Alignment.center,
          child: Column(
            children: <Widget>[
              Text('I am an Text',style: textStyle),
              Icon(Icons.android,size: 50,color: Colors.red),
              CloseButton(),
              BackButton(),
              Chip(
              //材料设计中一个非常有趣的小部件
                avatar: Icon(Icons.people),
                label: Text('StatelessWidget与基础组件'),
              ),
              Divider(
                height: 10,//容器高度，不是线的高度
                indent: 10,//左侧间距
                color: Colors.orange
              ),
              Card(
                color: Colors.red,
                elevation: 5,//阴影
                margin: EdgeInsets.all(10),
                child: Container(
                  padding: EdgeInsets.all(10),
                  child: Text('I am Card',style: textStyle,),
                ),
              ),
              AlertDialog(
                title: Text('盘它'),
                content: Text('你这个糟老头子坏得很'),
              )
            ],
          ),
        ),
      ),
    );
  }
}