flutter组件 Switch,SwitchListTile,Slider,showDatePicker,showTimePicker

1.Switch

const Switch({
    Key key,

    @required this.value, //值

    @required this.onChanged, //改变时触发

    this.activeColor,  //激活时原点的颜色

    this.activeTrackColor, //激活时横条的颜色

    this.inactiveThumbColor, //非激活时原点的颜色

    this.inactiveTrackColor, //非激活时横条的颜色

    this.activeThumbImage, // ImageProvider - 原点还支持图片，激活时的效果

    this.inactiveThumbImage, //非激活原点的图片效果

    this.materialTapTargetSize, //点击区域

    this.dragStartBehavior = DragStartBehavior.start, //确定处理拖动启动行为的方式。（没看出有什么变化)

  })

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

class InnerCom extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _InnerCom();
  }
}

class _InnerCom extends State<InnerCom> {
  bool _select = false; //第一个开关
  bool _selectImage = false; //图片的那个开关

  Widget _switch() {
    return Switch(
      activeColor: Colors.red,
      activeTrackColor: Colors.redAccent,
      inactiveThumbColor: Colors.black12,
      inactiveTrackColor: Colors.blueGrey,
      onChanged: (val) {
        setState(() {
          _select = val;
        });
      },
      value: _select,
    );
  }

  Widget _switchImage() {
    return Switch(
      activeColor: Colors.red,
      activeTrackColor: Colors.redAccent,
      inactiveThumbColor: Colors.black12,
      inactiveTrackColor: Colors.blueGrey,
      activeThumbImage: AssetImage("images/test.jpg"),
      inactiveThumbImage: AssetImage("images/test.jpg"),
      dragStartBehavior: DragStartBehavior.,
      onChanged: (val) {
        setState(() {
          _selectImage = val;
        });
      },
      value: _selectImage,
    );
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("component"),
      ),
      body: Column(
        children: <Widget>[
          Row(
            children: <Widget>[
              Text("开关："),
               _switch(), 
               _switchImage()
            ],
          )
        ],
      ),
    );
  }
}

      

2.SwitchListTile

 const SwitchListTile({
    Key key,
    @required this.value, //值
    @required this.onChanged, //改变事件
    this.activeColor, //原点颜色
    this.activeTrackColor, //横杠颜色
    this.inactiveThumbColor, //非激活状态原点颜色
    this.inactiveTrackColor, ///非激活状态横杠颜色
    this.activeThumbImage, //原点图片
    this.inactiveThumbImage, //非激活原点图片
    this.title, //主标题
    this.subtitle, //副标题
    this.isThreeLine = false, //是否三行模式
    this.dense, //是否字小，适合容器
    this.secondary, //小容器
    this.selected = false, //是否选择高亮显示
  }) 

 

SwitchListTile(
    activeColor: Colors.red,
    activeTrackColor: Colors.redAccent,
    inactiveThumbColor: Colors.black12,
    inactiveTrackColor: Colors.blueGrey,
    activeThumbImage: AssetImage("images/test.jpg"),
    inactiveThumbImage: AssetImage("images/test.jpg"),
    value: true,
    onChanged: (val) => {},
    title: Text("姓名"),
    subtitle: Text("小明"),
    secondary: Image.asset("images/test.jpg"),
)

3.Slider

const Slider({
    Key key,
    @required this.value, //滑块的值
    @required this.onChanged, //改变时触发
    this.onChangeStart, //改变前触发
    this.onChangeEnd, //改变后触发
    this.min = 0.0, //用户可以选择的最小值
    this.max = 1.0, //用户可以选择的最大值
    this.divisions, // 离散部分的数量
    this.label, //滑块处于活动状态时显示在滑块上方的标签
    this.activeColor, //激活时的颜色
    this.inactiveColor, //滑块轨道的非活动部分的颜色
    this.semanticFormatterCallback, //回调用于从滑块值创建语义值
})

 

Slider(
   min: 10,
   max: 100,
   divisions: 10, //不设置这个,label就没有用
   value: _sliderVal,
      onChanged: (val){
        setState(() {
           sliderVal=val; 
      });
   },
   activeColor: Colors.red,
   inactiveColor: Colors.blue,
   label: "$_sliderVal 美元",
)

    

4.showDatePicker

Future<DateTime> showDatePicker({
  @required BuildContext context, //上下文
  @required DateTime initialDate, //初始化的时间
  @required DateTime firstDate, //开始时间
  @required DateTime lastDate, //结束时间
  SelectableDayPredicate selectableDayPredicate, //可以过滤一些时间
  DatePickerMode initialDatePickerMode = DatePickerMode.day, //模式 day year
  Locale locale, //语言
  TextDirection textDirection,
  TransitionBuilder builder,
})

 

import 'package:flutter/material.dart';

class InnerCom extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _InnerCom();
  }
}

class _InnerCom extends State<InnerCom> {

  _showDate() {
    Locale myLocale = Localizations.localeOf(context); //获取当前的语言项目
    print(myLocale);
    showDatePicker(
            initialDate: DateTime.now(),
            firstDate: DateTime(2018, 4, 20),
            lastDate: DateTime(2019, 12, 12),
            initialDatePickerMode: DatePickerMode.year,
            // locale: Locale("en","US"),  目前是中文，这行不注释就是英文了
            //过滤掉10的日期，会变成灰色，不可选择
            selectableDayPredicate:(datetime){
              if(datetime.day==10){
                return false;
              }else{
                return true;
              }
            },
            context: context)
        .then((dates) { // 点击确定和取消的回调
      if (dates == null) { //取消是null
        print("cancel");
      } else { //确定的时候dates会有值
        print(dates);
        print('当前选择了：${dates.year}年${dates.month}月${dates.day}日');
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text("component"),
      ),
      body: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("时间"),
            onPressed: () {
              _showDate();
            },
          )
        ],
      ),
    );
  }
}

main.dart里面配置App

import 'package:flutter_localizations/flutter_localizations.dart'; //引入

// MaterialApp加上下面的配置
MaterialApp(
localizationsDelegates: [
   GlobalMaterialLocalizations.delegate,
   GlobalWidgetsLocalizations.delegate
],
supportedLocales: [
   Locale("zh","CN"),
   Locale("en","US")
],)

dev_dependencies:
  flutter_localizations:  //依赖也要装
    sdk: flutte

 

     

5. showTimePicker

Future<TimeOfDay> showTimePicker({
  @required BuildContext context, //上下文
  @required TimeOfDay initialTime, //初始时间
  TransitionBuilder builder,
})

_showTime() {
    showTimePicker(context: context, initialTime: TimeOfDay(hour: 17,minute: 25))
        .then((times) {
      if (times == null) {
        print("cancel");
      } else {
        print('当前选择了：${times.hour}时${times.minute}分');
      }
    });
}