日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

Flutter實現滾動選擇數字_Android

作者：Bob康康 ? 更新時間： 2022-05-24 編程語言

本文實例為大家分享了Flutter實現滾動選擇數字的具體代碼，供大家參考，具體內容如下

前言

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

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

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

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('確認'),
? ? ? ? ? ? ? ? ? ? ? ? onPressed: () {
? ? ? ? ? ? ? ? ? ? ? ? ? }));
? ? ? ? ? ? ? ? ? ? ? ? },
? ? ? ? ? ? ? ? ? ? ? ),
? ? ? ? ? ? ? ? ? ? ],
? ? ? ? ? ? ? ? ? );
? ? ? ? ? ? ? ? }
? ? ? ? ? ? ? );

我將contentPadding設置為零，看著舒服點。目前已經完成一部分了，還差中間的滾動選擇數字。

新建文件，創建一個StatelessWidget組件，這里不需要用到StatefulWidget，用不到setState。滾動數字我首先想到的是PageView組件，將它的scrollDirection變為Axis.vertical,就可以實現上下的滑動，這里我需要預覽當前前后兩個數字，在設置PageController的時候就需要給viewportFraction值，這里我給了0.3，具體看你給組件的寬高。

class PageChoose extends StatelessWidget {
? PageChoose({this.changeBookIdCallBack});
? final ValueChanged 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);
? ? ? ? ? ? ? },
? ? ? ? ? ? ),
? ? ? ? ? ],
? ? ? ? ),
? ? ? ),
? ? );
? }
}

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

總結

希望可以幫到初學Flutter的同學。

原文鏈接：https://blog.csdn.net/qq_44124643/article/details/110727159

欄目分類
最近更新