bugfix> flutter > 投稿

3つのフラットボタンが連続して表示されるアプリを作成しようとしています。最初のボタンがデフォルトで選択され、listViewウィジェットが表示されます。他の2つは、選択されるまでグレー表示する必要があります。選択すると、他のlistViewウィジェットが表示されます。 一度にフォーカスする必要があるボタンは1つだけで、他のボタンはグレー表示にする必要があります。 多くの記事を検索しましたが、満足のいく解決策は見つかりませんでした。

回答 1 件
  • 状態変数を使用するだけです。私はあなたのために実用的な例を書きました。

    import 'package:flutter/cupertino.dart';
    import 'package:flutter/material.dart';
    class Foo extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => FooState();
    }
    class FooState extends State<Foo> {
      int buttonSelected = 0;
      List<String> list1 = ["1st list"];
      List<String> list2 = ["2nd list"];
      List<String> list3 = ["3rd list"];
      @override
      Widget build(BuildContext context) {
        return Column(
          children: [
            Row(
              children: [
                getButton(0),
                getButton(1),
                getButton(2),
              ],
            ),
            getBody(),
          ],
        );
      }
      Widget getButton(int index) {
        return FlatButton(
            onPressed: () {
              setState(() {
                buttonSelected = index;
              });
            },
            color: buttonSelected == index ? Colors.red : Colors.grey,
            child: Text("button $index"));
      }
      Widget getBody() {
        if (buttonSelected == 0) {
          return getListView(list1);
        } else if (buttonSelected == 1) {
          return getListView(list2);
        } else {
          return getListView(list3);
        }
      }
      Widget getListView(List<String> currentList) {
        return ListView.builder(
            shrinkWrap: true,
            itemCount: currentList.length,
            itemBuilder: (BuildContext ctxt, int index) {
              return new Text(currentList[index]);
            });
      }
    }
    
    

    その後、buttonSelected値に基づいてコンテンツを表示できます。

    ロジックとプレゼンテーション層をより適切に分離したい場合は、Blocをチェックすることを強くお勧めします。そこに与えられた複数の例。

あなたの答え