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

更新時間：2022年03月22日 16:43:13 作者：Bob康康

這篇文章主要為大家詳細(xì)介紹了Flutter實現(xiàn)滾動選擇數(shù)字，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

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

前言

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

頁面需求要用戶輸入頁碼，之前選擇的是使用TextField。后來覺得用showDialog彈出選項，讓用戶自己選擇。類似這樣的：

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

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è)置為零，看著舒服點。目前已經(jīng)完成一部分了，還差中間的滾動選擇數(shù)字。

新建文件，創(chuàng)建一個StatelessWidget組件，這里不需要用到StatefulWidget，用不到setState。滾動數(shù)字我首先想到的是PageView組件，將它的scrollDirection變?yōu)锳xis.vertical,就可以實現(xiàn)上下的滑動，這里我需要預(yù)覽當(dāng)前前后兩個數(shù)字，在設(shè)置PageController的時候就需要給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)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: