RX 指的是 Reactive Extensions钥屈,是一套加工處理數(shù)據(jù)的方法或工具,是響應(yīng)式編程里面用到的東西河咽。RXDart 里面的 Observable 繼承了Stream田柔,Stream的方法在Observable上也可以用到。
class RxDartDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('RxDartDemo'), elevation: 0.0,),
body: RxDartDemoHome(),
);
}
}
class RxDartDemoHome extends StatefulWidget {
@override
_RxDartDemoHomeState createState() => _RxDartDemoHomeState();
}
class _RxDartDemoHomeState extends State<RxDartDemoHome> {
PublishSubject<String> _textFieldSubject;
@override
void initState() {
super.initState();
// 創(chuàng)建Observable的幾種方法
// Observable<String> _observable = Observable(Stream.fromIterable(['Hello', 'World']));
// Observable<String> _observable = Observable.fromFuture(Future.value('Future創(chuàng)建的'));
// Observable<String> _observable = Observable.just('just創(chuàng)建的');
// 使用 periodic 這個(gè)工廠方法可以創(chuàng)建在指定時(shí)間間隔重復(fù)觸發(fā)事件的 observable
// Duration :間隔的時(shí)間皮壁,后面提供重復(fù)要做的方法,這個(gè)方法可以接收一個(gè)參數(shù)就是重復(fù)的次數(shù)用x來表示哪审,在方法里可以制作并且返回每次的數(shù)據(jù),這里返回每間隔3秒中返回重復(fù)的次數(shù)
// Observable<String> _observable = Observable.periodic(Duration(seconds: 3), (x) => x.toString());
// _observable.listen(print);
// 使用subject控制Observable
// PublishSubject 需要先設(shè)置監(jiān)聽再添加數(shù)據(jù)才能監(jiān)聽到
// PublishSubject<String> _subject = PublishSubject<String>();
// BehaviorSubject 可以把最后一次添加的數(shù)據(jù)作為第一個(gè)項(xiàng)目交給新來的監(jiān)聽
// BehaviorSubject<String> _subject = BehaviorSubject<String>();
// ReplaySubject 把添加到subject的數(shù)據(jù)全部交給監(jiān)聽器虑瀑,maxSize可以設(shè)置最大接收數(shù)據(jù)的個(gè)數(shù)
// ReplaySubject<String> _subject = ReplaySubject<String>(maxSize: 1);
// _subject.add('add Data 1');
// _subject.add('add Data 2');
// _subject.listen((data) => print('listen 1: $data'));
// _subject.add('add Data 1');
// _subject.listen((data) => print('listen 2: ${data.toUpperCase()}'));
// _subject.add('add Data 2');
// _subject.close();
_textFieldSubject = PublishSubject<String>();
_textFieldSubject
// .map((item) => 'item : $item') // RxDart利用 map 可以實(shí)現(xiàn)數(shù)據(jù)轉(zhuǎn)換
// .where((item) => item.length > 10) // RxDart利用 where 可以給數(shù)據(jù)添加篩選條件
.debounce(Duration(milliseconds: 500)) // debounce 設(shè)置一個(gè)間隔的時(shí)間湿滓,用戶停止輸入以后過了這個(gè)時(shí)間才會(huì)讓數(shù)據(jù)通過
.listen((data) => print(data));
}
@override
void dispose() {
super.dispose();
_textFieldSubject.close();
}
@override
Widget build(BuildContext context) {
return Theme(
data: Theme.of(context).copyWith(primaryColor: Colors.redAccent),
child: TextField(
decoration: InputDecoration(labelText: 'Title', filled: true),
onChanged: (value) {
_textFieldSubject.add('input: $value');
},
onSubmitted: (value) {
_textFieldSubject.add('submit: $value');
},
),
);
}
}