openplanning

Hướng dẫn và ví dụ Flutter IndexedStack

Xem thêm các chuyên mục:

Nhóm phát triển của chúng tôi vừa ra mắt website langlearning.net học tiếng Anh, Nga, Đức, Pháp, Việt, Trung, Hàn, Nhật, ... miễn phí cho tất cả mọi người.
Là một website được viết trên công nghệ web Flutter vì vậy hỗ trợ rất tốt cho người học, kể cả những người học khó tính nhất.
Hiện tại website đang tiếp tục được cập nhập nội dung cho phong phú và đầy đủ hơn. Mong các bạn nghé thăm và ủng hộ website mới của chúng tôi.
Hãy theo dõi chúng tôi trên Fanpage để nhận được thông báo mỗi khi có bài viết mới. Facebook

1- IndexedStack

IndexedStack là một lớp con của Stack. Khác với Stack, tại một thời điểm IndexedStack chỉ hiển thị nhiều nhất một widget con, các widget con khác sẽ bị ẩn. Bạn có thể chỉ định widget con nào sẽ được hiển thị thông qua property index, nếu giá trị của indexnull sẽ không có widget con nào được hiển thị.
IndexedStack constructor

IndexedStack(
  {Key key,
  AlignmentGeometry alignment: AlignmentDirectional.topStart,
  TextDirection textDirection,
  StackFit sizing: StackFit.loose,
  int index: 0,
  List<Widget> children: const <Widget>[]}
)
Về cơ bản, Kích thước của IndexedStack là nhỏ nhất có thể, và cố gắng lớn hơn tất cả các widget con của nó (Ngoại trừ các widget con là Positioned hoặc Transform).
Bạn có thể kiểm soát kích thước của IndexedStack bằng cách đặt nó trong một SizedBox.

2- Examples

Một ví dụ đơn giản về IndexedStack:
main.dart (ex1)

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'o7planning.org',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _MyHomePageState();
  }
}

class _MyHomePageState extends State<MyHomePage> {

  int selectedIndex = 1;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text("Flutter IndexedStack Example")
      ),
      body: SizedBox (
        width: double.infinity,
        height: double.infinity,
        child: IndexedStack (
            alignment: Alignment.center,
            index: this.selectedIndex,
            children: <Widget>[
              Container(
                width: 290,
                height: 210,
                color: Colors.green,
              ),
              Container(
                width: 250,
                height: 170,
                color: Colors.red,
              ),
              Container(
                width: 220,
                height: 150,
                color: Colors.yellow,
              ),
            ]
        ),
      ),
      floatingActionButton: FloatingActionButton(
        child: Text("Next"),
        onPressed: () {
          setState(() {
            if(this.selectedIndex < 2)  {
              this.selectedIndex++;
            } else {
              this.selectedIndex = 0;
            }
          });
        },
      ),
    );
  }
}

3- children

children - là một danh sách các widget con của IndexedStack.

List<Widget> children: const <Widget>[]}

4- index

index: Chỉ số của widget con sẽ được hiển thị, giá trị mặc định của nó là 0. Nếu giá trị của indexnull sẽ không có widget con nào được hiển thị.

int index: 0

5- fit (sizing)

Tham số sizing trong constructor của IndexedStack sẽ gán giá trị cho property fit. Nó chỉ ra cách "Làm thế nào để định kích thước cho các widget con khác Positioned của IndexedStack". Giá trị mặc định của property fitStackFit.loose.

StackFit sizing: StackFit.loose

// Enum:
 StackFit.expand
 StackFit.loose
 StackFit.passthrough
  • TODO Link?

6- textDirection

Property textDirection được sử dụng để sét đặt hướng của văn bản, giá trị của nó sẽ ảnh hưởng tới hành vi của property alignment.

TextDirection textDirection

7- alignment

Property alignment được sử dụng để căn chỉnh các widget con khác Positioned. Giá trị mặc định của nó là AlignmentDirectional.topStart

AlignmentGeometry alignment: AlignmentDirectional.topStart

Xem thêm các chuyên mục: