Flutter widget3

widget 综合布局

弹性布局：Flex ，Expanded
线性布局：Row，Column--（都继承Flex）
流式布局：Wrap，自动换行 不溢出
层叠布局：Stack ,Position
容器布局：Padding，Container，Center，Align
滑动布局：SingleChildScrollView，Listview，Gridview，CustomScrollView，Page

日期时间选择

Future<DateTime> showDatePicker
Future<TimeOfDay> showTimePicker

Future修饰的方法代表异步方法，获取异步方法的返回值有两种方法
1.async+await 配合使用
2.then关键字
InkWell 是 点击控件，当某个控件没有点击功能，又需要点击事件，可以用InkWell包围
在此类引入了第三方库date_format，对日期时间进行格式化显示，可以在pub.dev网站找到，下载

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

class DataTimePages extends StatefulWidget {
  @override
  _DataTimePagesState createState() => _DataTimePagesState();
}

class _DataTimePagesState extends State<DataTimePages> {
  DateTime _nowDate = DateTime.now();
  TimeOfDay _timeOfDay = TimeOfDay(hour: 12, minute: 12);

///生命周期函数 组件加载的时候调用
  void initState() {
    super.initState();
    var nowData = DateTime.now();
    print("当前时间：$nowData");

    print("时间->时间戳:${nowData.millisecondsSinceEpoch}");

    var secondTime = nowData.millisecondsSinceEpoch;
    print("时间戳->日期：${DateTime.fromMicrosecondsSinceEpoch(secondTime)}");
  }

///显示日期选择弹框
  _showDataPick() {
    print(DateTime.now());
    showDatePicker(
      context: context,
      initialDate: DateTime.now(),
      firstDate: DateTime.parse("1988-02-27"),
      lastDate: DateTime.now(),
    ).then((value) {
      setState(() {
        _nowDate = value;
      });
    });
  }
///显示时间选择弹框
  _showTimePck() async {
    var result =
        await showTimePicker(context: context, initialTime: _timeOfDay);
    setState(() {
      _timeOfDay = result;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("选择日期时间"),
      ),
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              InkWell(
                child:
                    Text(formatDate(_nowDate, [yyyy, '年', mm, '月', dd, "日"])),
                onTap: _showDataPick,
              ),
              Icon(Icons.arrow_drop_down),
              SizedBox(
                width: 10,
              ),
              InkWell(
                onTap: _showTimePck,
                child: Text("${_timeOfDay.format(context)}"),
              ),
              Icon(Icons.arrow_drop_down),
            ],
          )
        ],
      ),
    );
  }
}

25.png