openplanning

Hướng dẫn sử dụng Flutter Stack

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

1- Stack

Trong Flutter, Stack là một bộ chứa cho phép đặt các widget con của nó chồng lên nhau, widget con đầu tiên sẽ được đặt ở dưới cùng. Stack là một giải pháp để tiết kiệm không gian của ứng dụng. Bạn có thể thay đổi thứ tự của các widget con để tạo ra hiệu ứng hoạt hình đơn giản.
Stack xắp xếp các widget con của nó theo nguyên tắc: widget con đầu tiên sẽ được đặt ở dưới cùng, widget con mới nhất sẽ được đặt ở trên cùng. Khi bạn thay đổi thứ tự của các widget con thì Stack sẽ được vẽ lại. Nếu số lượng và thứ tự các widget con thay đổi liên tục, mỗi widget con cần được cung cấp một giá trị Key cụ thể và duy nhất, điều này giúp Stack quản lý hiệu quả các widget con.
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ị.
Stack Constructor
Stack(
    {Key key,
    List<Widget> children: const <Widget>[],
    AlignmentGeometry alignment: AlignmentDirectional.topStart,
    TextDirection textDirection,
    StackFit fit: StackFit.loose,
    Overflow overflow: Overflow.clip,
    Clip clipBehavior: Clip.hardEdge
    }
)
Dưới đây là một ví dụ đơn giản, một Stack với 3 widget con, theo mặc định chúng được định vị ở góc trên bên phải của Stack, bạn có thể nhìn thấy chúng chồng chéo lên nhau:
(ex1)
Stack(
  children: <Widget>[
    Container(
      width: 290,
      height: 190,
      color: Colors.green,
    ),
    Container(
      width: 250,
      height: 170,
      color: Colors.red,
    ),
    Container(
      width: 220,
      height: 150,
      color: Colors.yellow,
    ),
  ],
)
Về cơ bản, Kích thước của Stack 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, xem thêm property overflow).
Hãy xem một ví dụ: Một Stack với một widget con có kích thước tối đa.
(ex2)
Stack(
  children: <Widget>[
    Container( // First child (child 1)
      width: double.infinity,
      height: double.infinity,
      color: Colors.green,
      margin: EdgeInsets.all(20)
    ),
    Container(
      width: 250,
      height: 170,
      color: Colors.red,
    ),
    Container(
      width: 220,
      height: 150,
      color: Colors.yellow,
    ),
  ],
)
Nếu bạn muốn căn chỉnh vị trí của một widget con (của Stack) hãy đặt nó trong một Align.
Chú ý: Khi widthFactorheightFactor không được chỉ định, nhưng child được chỉ định thì Align sẽ có kích thước lớn nhất có thể.
(ex3)
Stack(
  children: <Widget>[
    Container(
        width: double.infinity,
        height: double.infinity,
        color: Colors.green,
        margin: EdgeInsets.all(20)
    ),
    Align (
      alignment: Alignment.centerRight,
      child: Container(
        width: 250,
        height: 170,
        color: Colors.red,
      ),
    ),
    Container(
      width: 220,
      height: 150,
      color: Colors.yellow,
    ),
  ],
)
Bạn cũng có thể căn chỉnh vị trí của một widget con (của Stack) bằng cách đặt nó trong một Positioned.
 

2- children

children - là một danh sách các widget con của Stack.
List<Widget> children: const <Widget>[]

3- alignment

Property alignment được sử dụng để căn chỉnh các widget con không phải Positioned. Giá trị mặc định của nó là AlignmentDirectional.topStart.
AlignmentGeometry alignment: AlignmentDirectional.topStart
  • TODO Link!
Ví dụ dưới đây cho thấy property alignment của Stack không có tác dụng đối với các widget con là Positioned.
SizedBox (
   width: double.infinity,
   height: double.infinity,
   child: Stack(
     alignment: Alignment.centerLeft,
     children: <Widget>[
       Container(
         width: 290,
         height: 190,
         color: Colors.green,
       ),
       Container(
         width: 220,
         height: 130,
         color: Colors.yellow,
       ),
       Positioned (
         bottom: 10,
         right: 10,
         child: Container(
           width: 150,
           height: 90,
           color: Colors.red,
         ),
       ),
     ],
   )
)

4- 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

5- fit

Property fit chỉ ra cách "Làm thế nào để định kích thước cho các widget con không phải Positioned của IndexedStack". Giá trị mặc định của nó là StackFit.loose.
StackFit fit: StackFit.loose

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

6- overflow

Property overflow được sử dụng để chỉ định cách Stack sẽ đối xử với các widget con tràn ra (overflow) khỏi nó. Cách đối xử có thể là xén (clip) phần tràn ra ngoài, hoặc cho phép phần tràn ra ngoài hiển thị. Giá trị mặc định của overflowOverflow.clip.
Overflow overflow: Overflow.clip

// Enum:
Overflow.clip
Overflow.visible
Các kết quả kiểm tra cho thấy overflow:Overflow.visible chỉ làm việc với vài loại widget con (Chẳng hạn Positioned hoặc Transform).
  • TODO Link!
Ví dụ:
overflow (ex1)
Container (
    width: 250,
    height: 250,
    color: Colors.blueGrey,
    margin: EdgeInsets.all(20),
    child: Stack (
      overflow: Overflow.visible,
      children: <Widget>[
        Positioned(
          top: 50,
          left: 50,
          child: Container(
            width: 290,
            height: 100,
            color: Colors.green,
          ),
        ),
        Positioned(
          top: 70,
          left: 70,
          child: Container(
            width: 120,
            height: 230,
            color: Colors.yellow,
          ),
        )
      ],
    )
)
Ví dụ: Một Transform xiên (skew) dọc theo trục Y, nó có thể bị tràn ra (overflow) khỏi Stack, phần tràn theo trục Y sẽ được hiển thị, phần tràn theo trục X sẽ bị xén (clip).
overflow (ex2)
Container (
    width: 250,
    height: 250,
    margin: EdgeInsets.all(20),
    color: Colors.blueGrey,
    child: Stack (
      overflow: Overflow.visible,
      children: <Widget>[
        Container(
          height: 100,
          width: 300,
          color: Colors.green,
        ),
        Transform(
          alignment: FractionalOffset.topLeft,
          transform: Matrix4.skewY(0.7), // skew will not go out of y bounds
          child: Container(
            height: 100,
            width: 300,
            color: Colors.red,
          ),
        ),
      ],
    )
)
  • TODO Link!

7- clipBehavior

Clip clipBehavior: Clip.hardEdge
  • TODO Link!

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

Có thể bạn quan tâm

Đây là các khóa học trực tuyến bên ngoài website o7planning mà chúng tôi giới thiệu, nó có thể bao gồm các khóa học miễn phí hoặc giảm giá.