Flutter에서 IndexedStack 위젯을 사용하는 방법은 무엇입니까?

응용 프로그램은 위젯이 서로 상호 작용하는 방식을 설정하여 구축됩니다. 그것은 당신의 application is a widget .

레이아웃 모델을 포함하여 Flutter의 거의 모든 것이 위젯입니다. 위젯은 이미지, 아이콘 및 . 명백한 위젯을 정렬, 제한 및 정렬하는 행, 열 및 그리드는 보이지 않는 추가 위젯의 예입니다.

이 기사에서는 Flutter에서 IndexedStack 위젯을 탐색합니다.

다음은 IndexStack 위젯의 생성자입니다.

IndexedStack(
{Key? key,
AlignmentGeometry alignment=AlignmentDirectional.topStart,
TextDirection? textDirection,
StackFit sizing = StackFit.loose,
int? index = 0,
List<widget> children = const <widget>[]}
)</widget></widget>

정렬: 스택에서 위치 지정되지 않은 자식과 부분적으로 위치 지정된 자식은 이러한 특성을 사용하여 정렬됩니다.

텍스트 방향: 이 속성은 텍스트 방향에 따라 정렬을 결정하는 데 사용됩니다.

sizing: 스택에서 위치 지정되지 않은 자식은 이러한 속성을 사용하여 크기가 조정됩니다.

색인: 이 속성은 자식의 색인을 표시하는 데 사용됩니다.

**어린이: **목록은 이러한 속성을 사용합니다.

IndexedStack은 인덱스가 한 번에 하나의 구성 요소만 표시할 수 있는 스택입니다.

자식 그룹에서 단일 자식을 표시하는 스택. 표시되는 것은 지정된 인덱스가 있는 자식입니다.

Flutter에서 사용자 지정 탐색 모음을 구성하는 방법은 아래 데모에서 설명합니다. Flutter mobile application development company이 IndexedStack 위젯을 사용하여 사용자 정의 탐색 모음을 만드는 방법을 보여줍니다.

IndexStack 위젯의 전체 예를 살펴보겠습니다.

import 'package:flutter/material.dart';
void main() => runApp(const MaterialApp(home: IndexStackDemo()));
class IndexStackDemo extends StatefulWidget {
  const IndexStackDemo({Key? key}) : super(key: key);
  @override
  _IndexStackDemoState createState() => _IndexStackDemoState();
}
class _IndexStackDemoState extends State<indexstackdemo> {
  int index = 0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Indexed Stack Demo'),
      ),
      body: Padding(
        child: Column(
          children: <widget>[_stackedContainers(), _navigationButtons()],
        ),
        padding: const EdgeInsets.all(5.0),
      ),
    );
  }
  Widget _stackedContainers() {
    return Expanded(
      child: IndexedStack(
        index: index,
        children: const <widget>[
          Center(
            child: Icon(
              Icons.home,
              size: 100,
            ),
          ),
          Center(
            child: Icon(
              Icons.list,
              size: 100,
            ),
          ),
          Center(
            child: Icon(
              Icons.settings,
              size: 100,
            ),
          ),
        ],
      ),
    );
  }
  Widget _navigationButtons() {
    return Row(
      mainAxisAlignment: MainAxisAlignment.spaceEvenly,
      children: <widget>[
        ElevatedButton(
          child: const Text(
            'Home',
            style: TextStyle(fontSize: 16.0, color: Colors.white),
          ),
          onPressed: () {
            setState(() {
              index = 0;
            });
          },
        ),
        ElevatedButton(
          child: const Text(
            'List',
            style: TextStyle(fontSize: 16.0, color: Colors.white),
          ),
          onPressed: () {
            setState(() {
              index = 1;
            });
          },
        ),
        ElevatedButton(
          child: const Text(
            'Settings',
            style: TextStyle(fontSize: 16.0, color: Colors.white),
          ),
          onPressed: () {
            setState(() {
              index = 2;
            });
          },
        ),
      ],
    );
  }
}</widget></widget></widget></indexstackdemo>

산출:

결론:

오늘 우리Flutter experts는 기사에서 IndexedStack 위젯의 기본 구조에 대한 기본 설명을 제공했습니다. 적합하다고 판단되는 대로 코드를 자유롭게 변경할 수 있습니다. 이것은 Flutter를 활용하여 작동하는 IndexedStack Widget On User Interaction에 대한 간략한 소개였습니다.