フロント側をFlutter(スマホ)Thymeleaf(PC)、バックエンド側SpringBootの自動作成勉強中
10:12
つぎは、ページングと、詳細、更新、削除ボタン付けのうち、ページングをやろう。とりあえず、これも、ドロップダウンリストでやろうと思う。
17:27
①Flutter側のページングを作った。昨日作った、並び順ドロップダウンリストの左横にページングドロップダウンリストを作った。
・ドロップダウンリスト2個横に並べたら画面サイズを越してしまったので、「Row」をやめて「Wrap」にした。そしたらTEXTが上下真ん中にならなくなって(RowにはmainAxisAlignment: MainAxisAlignment.center,がない)見かけがよくないので、TEXT(タイトル)はやめることにした。
・昨日作った並び順ドロップダウンリストの修正
・タイトル”並び順:”を削除した。・・・なくてもわかるから。
・選択されたものを黄色くマークした。・・・見やすそうだから。
・今日作ったページングドロップダウンリスト
・タイトル付けるのやめた。・・・なくてもわかるから。
・該当ページを濃い黒色にして、黄色くマークした。・・・見やすそうだから。
・WEB画面上、押しても意味のないボタンを実現するのに、灰色文字を使い選択しても処理を行わないようにした。
・WEB画面上のページング機能を、そのままFlutter画面に反映した。
■とりあえずFlutter側画面のみ
■Flutter側プロフラム←明日ダメ出しがあって、書き換えた。明日の日記をみること。これでは動かない。
class _UserListState extends State<UserList> { ・・・ Widget build(BuildContext context) { ・・・ body: Form( key: _formKey, child : ListView( controller: _scrollController, children: _makeWidgets(), ), ), ・・・ } List<Widget> _makeWidgets() { if (_selectedIndex == 0) { return _makeCndsWidgets(); } else { return _makeListWidgets(); } } ・・・ List<Widget> _makeListWidgets() { ・・・ contentWidgets.add(Center( // ページ指定選択 child:Wrap( //mainAxisAlignment: MainAxisAlignment.center, alignment: WrapAlignment.center, direction: Axis.horizontal, children: <Widget>[ DropdownButton( items: getPageDropDown(5, _userSrchForm.pageObjSize, _userSrchForm.pageObjTotalPages, _userSrchForm.page), value: _userSrchForm.page, icon: const Icon(Icons.arrow_downward), elevation: 16, style: const TextStyle(color: Colors.deepPurple), underline: Container( height: 2, color: Colors.deepPurpleAccent, ), onChanged: (value) { setState(() { // ページ指定可能な物のみ処理する if (value as int > 0 && value != _userSrchForm.page) { _userSrchForm.page = value; // 情報一覧リストへ、list_backで、httpアクセス httpForListBack(); } }); }, ), // 並び順選択 ・・・ ]), ), ); ・・・ return contentWidgets; } /// ページング用DropdownMenuItemを戻す /// /// maxPageSizes 1画面あたりのページ数 /// contentSize 1ページのレコード数 /// totalPages 総ページ数 /// pageNumber 現在のページ番号 /// return ページング用DropdownMenuItem static List<DropdownMenuItem<int>> getPageDropDown(int maxPageSizes, int contentSize, int totalPages, int pageNumberBase) { List<DropdownMenuItem<int>> _items = <DropdownMenuItem<int>>[]; int totalGroups = (totalPages / (maxPageSizes + 0.0)).ceil(); int pageNumber = contentSize == 0 ? 0 : pageNumberBase + 1; int pageNumberGroup = (pageNumber / (maxPageSizes + 0.0)).ceil(); int startPage = (pageNumberGroup - 1) * maxPageSizes + 1; int endPage = startPage + maxPageSizes - 1; if (endPage >= totalPages) { endPage = totalPages; } int pageNumber0Org = pageNumber - 1; if (pageNumberGroup > 1) { _items.add(const DropdownMenuItem( value: 0, child: Text('[最初]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); _items.add(DropdownMenuItem( value:(pageNumberGroup - 1) * maxPageSizes - 1, child: const Text('[前グループ]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); } else { _items.add(const DropdownMenuItem( value: -11, child: Text('[最初]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.grey)), )); } if (pageNumber == 1) { _items.add(const DropdownMenuItem( value: -12, child: Text('[前ページ]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.grey)), )); } else { _items.add(DropdownMenuItem( value: pageNumber0Org - 1, child: const Text('[前ページ]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); } for (int i = startPage; i <= endPage; i++) { if (pageNumber == i) { _items.add(DropdownMenuItem( value: i - 1, child: Text('[' + CommUtils.chgToString(i) + ']', style: const TextStyle(fontWeight:FontWeight.w900, color: Colors.black, backgroundColor: Colors.yellow)), )); } else { _items.add(DropdownMenuItem( value: i - 1, child: Text('[' + CommUtils.chgToString(i) + ']', style: const TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); } } if (pageNumber == totalPages || totalPages == 1 || totalPages == 0) { if (totalPages == 0) { _items.add(const DropdownMenuItem( value: -13, child: Text('[1]', style: TextStyle( fontWeight: FontWeight.normal, color: Colors.grey)), )); _items.add(const DropdownMenuItem( value: -14, child: Text('[次ページ]"', style: TextStyle( fontWeight: FontWeight.normal, color: Colors.grey)), )); } else { _items.add(const DropdownMenuItem( value: -14, child: Text('[次ページ]', style: TextStyle( fontWeight: FontWeight.normal, color: Colors.grey)), )); } } else { _items.add(DropdownMenuItem( value: pageNumber0Org + 1, child: const Text('[次ページ]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); } if (pageNumberGroup < totalGroups) { _items.add(DropdownMenuItem( value: ((pageNumberGroup * maxPageSizes) - 1) + 1, child: const Text('[次グループ]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); _items.add(DropdownMenuItem( value: totalPages - 1, child: const Text('[最後]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.black)), )); } else { _items.add(const DropdownMenuItem( value: -15, child: Text('[最後]', style: TextStyle(fontWeight: FontWeight.normal, color: Colors.grey)), )); } return _items.toList(); }
■2022/06/15に、勉強した成果:『Flutter_JavaSpringプログラム自動作成◎自動生成ツール』をVectorに載せました。Zenn本も書きました。使ってみての感想や間違いの指定や、こうやったほうがいいとかの情報があればメールください。
・Vector
www.vector.co.jp
・Zenn本(Flutter_JavaSpringプログラム自動作成)
zenn.dev