Flutter

flutter基础组件

1、Text 设置

 return Text(
      "qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm,qwertyuiopasdfghjklzxcvbnm",
      textAlign: TextAlign.end,
      textDirection: TextDirection.rtl,
      //right to left
      maxLines: 2,
      overflow: TextOverflow.ellipsis,
      //显示省略号
      textScaleFactor: 1.1,
      //文字缩放倍率
      style: TextStyle(
          letterSpacing: 3,
          //字符间隔
          fontSize: 20,
          color: Colors.orange,
          fontWeight: FontWeight.normal,//文字粗细
          decoration: TextDecoration.none //去掉下划线
          ),
    );

2、去掉右上角debug角标，发release版本或者设置

debugShowCheckedModeBanner: false,//去掉右上角debug样式

3、Checkbox,因为有状态，所以要在StatefuleWidget中定义存储其状态的变量，并在点击对状态进行修改

  Checkbox(
            value: flag,//全局变量
            onChanged: (value) {
              this.setState(() {
                flag = value;//通过setState方法对该变量进行修改
              });
            },
          ),

4、ListView 列表数据，列表内部可以封装成一个（包含布局等逻辑的对象？？？不知道啥术语）,且list内部内容样式多样

return ListView(
      children: <Widget>[
        Text("数据",style: TextStyle(fontSize: 30,letterSpacing: 20,color: Colors.red),),
        SizedBox(height: 6),//用法一：设置两个组件间的间距，用法二：限制内部组件的大小
        HYHomeProductItem("Apple2", "Macbook2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imm9u5zj30u00k0adf.jpg"),
        SizedBox(height: 6,),
        HYHomeProductItem("Apple3", "Macbook2", "https://tva1.sinaimg.cn/large/006y8mN6gy1g72imqlouhj30u00k00v0.jpg"),
        SizedBox(height: 6,),
      ],
    );

5、padding 和margin

      padding: EdgeInsets.all(12),
      margin: EdgeInsets.all(16),

6、BoxDecoration,container的装饰器，一般用于设置外层布局背景等样式

   decoration: BoxDecoration(
            border: Border.all(
              width: 2, // 设置边框的宽度
              color: Colors.pink, // 设置边框的颜色
            ),
            borderRadius: BorderRadius.all(Radius.circular(16)) ,//设置圆角
            boxShadow: [BoxShadow(color: Colors.grey, offset: Offset(-2, -2),blurRadius: 10,spreadRadius: 10)]
    ),

7、构造函数传值

定义StatefulWidget，build方法时放在State中实现的，因为在运行过程中，Widget是不断创建销毁的。类似android 的adapter.

传值
HYHomeContent0202("1111"),

定义
class HYHomeContent0202 extends StatefulWidget {
  final String message;

  HYHomeContent0202(this.message);

  @override
  State<StatefulWidget> createState() {
    return _HYHomeContentState();
  }
}

实现：
class _HYHomeContentState extends State<HYHomeContent0202> {
  int _counter = 0;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Text("传递的信息:${widget.message}"),
          _getButtons(),//自定义的获取组件方法
          Text("当前计数:$_counter", style: TextStyle(fontSize: 25),),
        ],
      ),
    );
  }

8、自定义组件，如下，就相当于封装应该创建View的方法

Widget _getDefineWidget(){
  return Text("自定义的组件",style: TextStyle(color: Colors.blueAccent));
}

9、生命周期

常见业务场景：Widget A打开Widget

对于B:

第一步：A中调用 Navigator.push(B)

第二步：B构造函数--->B initState--->B didChangeDependencies--->B build--->A deactive--->A didChangeDependencies.

第三步：Widget B退出： Navigator.pop

              A deactive--->A didChangeDependencies--->A build--->B deactive--->B dispose

其中(以下方法都在state中)：

createState构造函数，是StatefulWidget来创建State的方法，只调用一次。

initState:组件创建后调用的第一个方法，只执行一次

didChangeDependencies：在initState后调用，可多次调用

build：在didChangeDependencies后调用，每次setState方法执行后会刷新，重新调用build绘制页面，多次调用

deactivate(组件移除时)

dispose(组件移除时)：可执行一些取消监听、动画的操作

inactive:退到后台或弹出对话框市区焦点时，类似android的onPause

paused:应用挂起，类似onStop

resumed:界面可见

10、TextSpan方法：类似文件拼接，一行显示多种效果，也能响应点击事件

  return Text.rich(TextSpan(
        children: [
          TextSpan(
              text: "TextSpan方法，放在Text里",
              style: TextStyle(fontSize: 20, color: Colors.green)),
          WidgetSpan(
              child: Icon(
                Icons.favorite,
                color: Colors.red,
              )),
          TextSpan(text: "点我输出", style: TextStyle(color: Colors.blue), recognizer: recognizer),
        ]));

  //定义点击事件
  final TapGestureRecognizer recognizer = TapGestureRecognizer();

  void initState() {
    super.initState();
    recognizer.onTap = () {
      print("点击了");
    };
  }

11、 按钮

• RaisedButton：凸起、有阴影 - 继承自MaterialButton
• FlatButton：扁平、无阴影 - 继承自MaterialButton
• OutlineButton：带边框 - 继承自MaterialButton
• IconButton：带图标 - 继承自StatelessWidget

        RaisedButton(
          child: Text("RaisedButton"),
          textColor: Colors.white,
          color: Colors.purple,
          onPressed: () => print("RaisedButton Click"),//点击事件
        ),

自定义样式的按钮

  FlatButton(
          color: Colors.amberAccent,//背景色
          highlightColor: Colors.greenAccent,//长按样式
          padding: EdgeInsets.fromLTRB(10, 10, 60, 15),
          shape: RoundedRectangleBorder(//设置按钮形状
              borderRadius: BorderRadius.circular(28)//圆角
          ),
          child: Row(//按行排
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Icon(Icons.favorite, color: Colors.red,),
              Text("喜欢作者")
            ],
          ),
          onPressed: () {},
        )

常用提交按钮设置

  Container(
              width: double.infinity,//最大
              height: 40,
              margin: EdgeInsets.