欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

Flutter實(shí)現(xiàn)滾動(dòng)選擇數(shù)字

 更新時(shí)間:2022年03月22日 16:43:13   作者:Bob康康  
這篇文章主要為大家詳細(xì)介紹了Flutter實(shí)現(xiàn)滾動(dòng)選擇數(shù)字,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了Flutter實(shí)現(xiàn)滾動(dòng)選擇數(shù)字的具體代碼,供大家參考,具體內(nèi)容如下

前言

本來想百度查的,結(jié)果沒查到,只有自己寫,順便記錄一下,加深印象

頁面需求要用戶輸入頁碼,之前選擇的是使用TextField。后來覺得用showDialog彈出選項(xiàng),讓用戶自己選擇。類似這樣的:

確定了樣式就開始寫吧。關(guān)于Dialog的選擇,我用的是SimpleDialog,有對(duì)細(xì)節(jié)上有要求的可以自己自定義一個(gè)。

showDialog(
? ? ? ? ? ? ? ? context: context,
? ? ? ? ? ? ? ? barrierDismissible: true,
? ? ? ? ? ? ? ? builder: (ctx){
? ? ? ? ? ? ? ? ? return SimpleDialog(
? ? ? ? ? ? ? ? ? ? title: Text('頁碼選擇'),
? ? ? ? ? ? ? ? ? ? contentPadding: EdgeInsets.zero,
? ? ? ? ? ? ? ? ? ? children: [
? ? ? ? ? ? ? ? ? ? ? PageChoose(changeBookIdCallBack: (pageNum2){
? ? ? ? ? ? ? ? ? ? ? ? setState(() {
? ? ? ? ? ? ? ? ? ? ? ? ? pageNum = pageNum2;
? ? ? ? ? ? ? ? ? ? ? ? });
? ? ? ? ? ? ? ? ? ? ? }),
? ? ? ? ? ? ? ? ? ? ? Divider(height: 1,),
? ? ? ? ? ? ? ? ? ? ? FlatButton(
? ? ? ? ? ? ? ? ? ? ? ? child: Text('取消'),
? ? ? ? ? ? ? ? ? ? ? ? onPressed: () {
? ? ? ? ? ? ? ? ? ? ? ? ? Navigator.of(context).pop();
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ? Divider(height: 1,),
? ? ? ? ? ? ? ? ? ? ? FlatButton(
? ? ? ? ? ? ? ? ? ? ? ? child: Text('確認(rèn)'),
? ? ? ? ? ? ? ? ? ? ? ? onPressed: () {
? ? ? ? ? ? ? ? ? ? ? ? ? }));
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? );

我將contentPadding設(shè)置為零,看著舒服點(diǎn)。目前已經(jīng)完成一部分了,還差中間的滾動(dòng)選擇數(shù)字。

新建文件,創(chuàng)建一個(gè)StatelessWidget組件,這里不需要用到StatefulWidget,用不到setState。滾動(dòng)數(shù)字我首先想到的是PageView組件,將它的scrollDirection變?yōu)锳xis.vertical,就可以實(shí)現(xiàn)上下的滑動(dòng),這里我需要預(yù)覽當(dāng)前前后兩個(gè)數(shù)字,在設(shè)置PageController的時(shí)候就需要給viewportFraction值,這里我給了0.3,具體看你給組件的寬高。

class PageChoose extends StatelessWidget {
? PageChoose({this.changeBookIdCallBack});
? final ValueChanged<int> changeBookIdCallBack;
? final PageController pagecontroller = new PageController(viewportFraction: 0.3,initialPage: 1);
? @override
? Widget build(BuildContext context) {
? ? return Center(
? ? ? child: Container(
? ? ? ? alignment: Alignment.center,
? ? ? ? height: 150,
? ? ? ? width: 60,
? ? ? ? child: Stack(
? ? ? ? ? children: [
? ? ? ? ? ? Center(
? ? ? ? ? ? ? child: Container(
? ? ? ? ? ? ? ? height: 50,
? ? ? ? ? ? ? ? decoration: BoxDecoration(
? ? ? ? ? ? ? ? ? border: Border(top: BorderSide(width: 0.5),bottom: BorderSide(width: 0.5))
? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ),
? ? ? ? ? ? ),
? ? ? ? ? ? PageView.builder(
? ? ? ? ? ? ? itemCount: 50,
? ? ? ? ? ? ? controller: pagecontroller,
? ? ? ? ? ? ? scrollDirection: Axis.vertical,
? ? ? ? ? ? ? pageSnapping: true,
? ? ? ? ? ? ? physics: AlwaysScrollableScrollPhysics(),
? ? ? ? ? ? ? itemBuilder: (ctx ,index ){
? ? ? ? ? ? ? ? return Center(child: Text('$index',style: TextStyle(fontSize: 20),));
? ? ? ? ? ? ? },
? ? ? ? ? ? ? onPageChanged: (int index) {
? ? ? ? ? ? ? ? changeBookIdCallBack(index);
? ? ? ? ? ? ? },
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

我還給組件加了子傳父的方法,這樣在選完后直接傳值給父頁面。這樣就完成了。

總結(jié)

希望可以幫到初學(xué)Flutter的同學(xué)。

以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論