Flutter: Mở rộng so với Linh hoạt

Tôi đã sử dụng cả hai Expandedvà Flexiblewidget và chúng dường như hoạt động giống nhau. Có sự khác biệt nào giữa hai thứ mà tôi đã bỏ qua không?

Scaffold(
  appBar: AppBar(),
  body: Column(
    children: <Widget>[
      Row(
        children: <Widget>[
          buildExpanded(),
          buildFlexible(),
        ],
      ),
      Row(
        children: <Widget>[
          buildExpanded(),
          buildExpanded(),
        ],
      ),
      Row(
        children: <Widget>[
          buildFlexible(),
          buildFlexible(),
        ],
      ),
    ],
  ),
);

Expanded chỉ là cách viết tắt của Flexible

Sử dụng mở rộng theo cách này:

Expanded(
  child: Foo(),
);

hoàn toàn tương đương với:

Flexible(
  fit: FlexFit.tight,
  child: Foo(),
);

Bạn có thể muốn sử dụng Flexiblehơn Expandedkhi bạn muốn một sự khác biệt fit, hữu ích trong một số bố cục đáp ứng.

Sự khác biệt giữa FlexFit.tightvà FlexFit.looselà lỏng lẻo sẽ cho phép con của nó có kích thước tối đa trong khi chặt buộc con đó phải lấp đầy tất cả không gian có sẵn.

Tiện ích con trong Linh hoạt theo mặc định là WRAP_CONTENT mặc dù bạn có thể thay đổi nó bằng cách sử dụng tham số Fit.

Tiện ích con trong Đã mở rộng là MATCH_PARENT, bạn có thể thay đổi nó bằng cách sử dụng linh hoạt .

Expanded- nó Flexiblephù hợp với bộ

class Expanded extends Flexible {
    const Expanded({
        Key key,
        int flex = 1,
        @required Widget child,
    }) : super(
        key: key, 
        flex: flex, 
        fit: FlexFit.tight, 
        child: child
    );
}

Bạn có thể sử dụng Linh hoạt để thay đổi kích thước các tiện ích con trong các hàng và cột . Nó chủ yếu được sử dụng để điều chỉnh không gian của các widget con khác nhau trong khi vẫn giữ mối quan hệ với các widget cha của chúng.

Trong khi đó, Expanded thay đổi các ràng buộc được gửi đến con của các hàng và cột ; nó giúp lấp đầy không gian có sẵn ở đó. Do đó, khi bạn bọc con mình trong một tiện ích Mở rộng, nó sẽ lấp đầy các khoảng trống.

Cung cấp những video này từ kênh YouTube chính thức của Flutter chỉ để giúp đỡ những người có thể tìm kiếm video này trong tương lai sắp tới ...

1. Đã mở rộng:

2. Linh hoạt:

Sự khác biệt duy nhất nếu bạn sử dụng Flexiblethay thế Expanded, là Flexiblecho phép con của nó có cùng chiều rộng hoặc nhỏ hơn Flexiblechính nó, trong khi Expandedbuộc con của nó phải có cùng chiều rộng chính xác của Expanded. Nhưng cả hai Expandedvà Flexiblebỏ qua chiều rộng của con cái của họ khi tự định cỡ.

Row(children:[
  Flexible(
    child: Container(color: Colors.red, child: Text('This is a very long text that won’t fit the line.'))),
  Flexible(
    child: Container(color: Colors.green, child: Text(‘Goodbye!’))),
  ]
)

Lưu ý : Điều này có nghĩa là không thể mở rộng Rowtrẻ em tương ứng với kích thước của chúng. Hàng sử dụng chiều rộng chính xác của con hoặc bỏ qua hoàn toàn khi bạn sử dụng Expandedhoặc Flexible.

Expanded () không hơn gì Linh hoạt () với

Flexible (fit: FlexFit.tight) = Expanded()

nhưng, sử dụng linh hoạt fit :FlexFit.loosetheo mặc định.

FlexFit.tight = Muốn vừa khít với phụ huynh chiếm nhiều không gian nhất có thể.

FlexFit.loose = Muốn vừa với phụ huynh, chiếm ít không gian nhất có thể cho chính nó.