Flutter實現捲動選擇數位

2022-03-22 19:00:43

本文範例為大家分享了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<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);
              },
            ),
          ],
        ),
      ),
    );
  }
}

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

總結

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

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援it145.com。

Flutter實現捲動選擇數位

前言

熱門文章