[flutter] 플러터(IndexedStack)에서 인덱스 변경시 이전 페이지와 새 페이지의 상호 작용을 제어하는 방법은 무엇인가요?

07 Dec 2023

flutter

상태 관리를 사용하여 상호 작용 제어: IndexedStack 위젯의 인덱스 변경을 감지하고, 해당 인덱스에 해당하는 자식 위젯에서 상태 관리를 통해 상호 작용을 제어할 수 있습니다. 예를 들어, 현재 페이지에서 버튼을 누르면 인덱스를 변경하고, 새 페이지에서는 인덱스에 따라 다른 작업을 수행할 수 있습니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int selectedIndex = 0;

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: selectedIndex,
      children: [
        // 첫 번째 페이지
        Container(
          child: RaisedButton(
            child: Text('Next'),
            onPressed: () {
              setState(() {
                selectedIndex = 1;
              });
            },
          ),
        ),
        // 두 번째 페이지
        Container(
          child: Text('New Page'),
        ),
      ],
    );
  }
}

GlobalKey를 사용하여 상호 작용 제어: IndexedStack 위젯의 각 자식 위젯에 GlobalKey를 할당하고, GlobalKey를 사용하여 해당 위젯의 상태나 동작을 제어할 수 있습니다. 예를 들어, 이전 페이지에서 인덱스를 변경하는 버튼을 누를 때 GlobalKey를 통해 새 페이지의 특정 동작을 호출할 수 있습니다.

class MyWidget extends StatefulWidget {
  @override
  _MyWidgetState createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  int selectedIndex = 0;
  GlobalKey<FirstChildWidgetState> firstChildKey = GlobalKey();

  @override
  Widget build(BuildContext context) {
    return IndexedStack(
      index: selectedIndex,
      children: [
        FirstChildWidget(key: firstChildKey), // 첫 번째 페이지
        SecondChildWidget(), // 두 번째 페이지
      ],
    );
  }
}

class FirstChildWidget extends StatefulWidget {
  FirstChildWidget({Key key}) : super(key: key);

  @override
  FirstChildWidgetState createState() => FirstChildWidgetState();
}

class FirstChildWidgetState extends State<FirstChildWidget> {
  void doSomething() {
    // 새 페이지에서 수행할 동작
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: RaisedButton(
        child: Text('Next'),
        onPressed: () {
          setState(() {
            widget.key.currentState.doSomething();
          });
        },
      ),
    );
  }
}

class SecondChildWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text('New Page'),
    );
  }
}

위의 방법들을 통해 인덱스 변경 시 이전 페이지와 새 페이지의 상호 작용을 제어할 수 있습니다. 선택한 방법에 따라 필요에 맞게 적절한 상태 관리나 GlobalKey를 활용하면 됩니다.