kazpgmの日記

『プログラム自動作成@自動生成』作成の日記

フロント側を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