Tương đương của wrap_content và match_parent trong Flaming?

Trong Android match_parentvà wrap_contentđược sử dụng để thay đổi kích thước tự động của các widget tương ứng với cha mẹ của chúng với nội dung mà widget chứa.

Trong Flutter, có vẻ như theo mặc định, tất cả các widget đều được đặt thành wrap_content, làm cách nào để thay đổi nó để tôi có thể điền vào nó widthvà heightthành của cha mẹ của nó?

Bạn có thể làm với một chút Thủ thuật: Giả sử bạn có yêu cầu về: (Chiều rộng, Chiều cao)

Wrap_content, Wrap_content:

 //use this as child
 Wrap(
  children: <Widget>[*your_child*])

Match_parent, Match_parent:

 //use this as child
Container(
        height: double.infinity,
    width: double.infinity,child:*your_child*)

Match_parent, Wrap_content:

 //use this as child
Row(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[*your_child*],
);

Wrap_content, Match_parent:

 //use this as child
Column(
  mainAxisSize: MainAxisSize.max,
  children: <Widget>[your_child],
);

Để có được hành vi cho match_parent và wrap_content, chúng ta cần sử dụng thuộc tính mainAxisSize trong tiện ích con Hàng / Cột , thuộc tính mainAxisSize lấy MainAxisSize enum có hai giá trị là MainAxisSize.min hoạt động như wrap_content và MainAxisSize.max hoạt động như match_parent .

Liên kết của Bài báo gốc

Câu trả lời ngắn gọn là bố mẹ không có kích thước cho đến khi con có kích thước.

Cách bố cục hoạt động trong Flutter là mỗi tiện ích con cung cấp các ràng buộc cho mỗi tiện ích con của nó, chẳng hạn như "bạn có thể rộng đến mức này, bạn phải cao đến mức này, bạn phải rộng ít nhất là như vậy" hoặc bất cứ điều gì (cụ thể là chúng có chiều rộng tối thiểu, chiều rộng tối đa, chiều cao tối thiểu và chiều cao tối đa). Mỗi đứa trẻ nhận những ràng buộc đó, thực hiện một cái gì đó và chọn một kích thước (chiều rộng và chiều cao) phù hợp với những ràng buộc đó. Sau đó, khi mỗi đứa trẻ đã làm xong việc của mình, tiện ích con có thể chọn kích thước của riêng nó.

Một số tiện ích con cố gắng lớn như mức độ cha mẹ cho phép. Một số tiện ích cố gắng nhỏ đến mức độ cha mẹ cho phép. Một số widget cố gắng khớp với một kích thước "tự nhiên" nhất định (ví dụ: văn bản, hình ảnh).

Một số vật dụng cho con cái biết chúng có thể có kích thước bất kỳ mà chúng muốn. Một số cho con cái của họ những ràng buộc giống như những ràng buộc mà chúng nhận được từ cha mẹ của chúng.

Thực tế có một số tùy chọn có sẵn:

Bạn có thể sử dụng SizedBox.expand để làm cho tiện ích con của bạn khớp với các kích thước cha mẹ hoặc SizedBox (width: double.infinity) để chỉ khớp với chiều rộng hoặc SizedBox (heigth: double.infinity) để chỉ khớp với heigth.

Nếu bạn muốn một hành vi wrap_content, nó phụ thuộc vào tiện ích con bạn đang sử dụng, ví dụ: nếu bạn đặt một nút trên một cột, nó sẽ hoạt động giống như wrap_content và để sử dụng nó như match_parent, bạn có thể bọc nút bằng một tiện ích con Mở rộng hoặc một hộp có kích thước.

Với ListView, nút nhận được một hành vi match_parent và để có được một hành vi wrap_content, bạn có thể bọc nó bằng một widget Flex như Row.

Việc sử dụng tiện ích con Mở rộng làm cho phần con của Hàng, Cột hoặc Linh hoạt mở rộng để lấp đầy không gian có sẵn trong trục chính (ví dụ: theo chiều ngang đối với Hàng hoặc theo chiều dọc đối với Cột). https://docs.flutter.io/flutter/widgets/Expanded-class.html

Việc sử dụng tiện ích con Linh hoạt mang lại cho con của Hàng, Cột hoặc Linh hoạt khả năng mở rộng linh hoạt để lấp đầy khoảng trống có sẵn trong trục chính (ví dụ: theo chiều ngang đối với Hàng hoặc theo chiều dọc đối với Cột), nhưng, không giống như Mở rộng, Linh hoạt không yêu cầu đứa trẻ điền vào chỗ trống có sẵn. https://docs.flutter.io/flutter/widgets/Flexible-class.html

Một cách giải quyết đơn giản:

Nếu một vùng chứa chỉ có một phần tử cấp cao nhất, thì bạn có thể chỉ định thuộc tính căn chỉnh cho phần tử đó và cung cấp cho nó bất kỳ giá trị khả dụng nào. nó sẽ lấp đầy tất cả không gian trong vùng chứa.

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    alignment:Alignment.[any_available_option] // make the yellow child match the parent size
   )
)

Cách khác:

Container(color:Colors.white,height:200.0,width:200.0,
 child:Container(
    color: Colors.yellow,
    constraints:  BoxConstraints.expand(height: 100.0), // height will be 100 dip and width will be match parent
   )
)

Tôi đã sử dụng giải pháp này, bạn phải xác định chiều cao và chiều rộng của màn hình bằng MediaQuery:

 Container(
        height: MediaQuery.of(context).size.height,
        width: MediaQuery.of(context).size.width
  )

Stack(
  children: [
    Container(color:Colors.red, height:200.0, width:200.0),
    Positioned.fill(
      child: Container(color: Colors. yellow),
    )
  ]
),

Sử dụng tiện ích Wrap.

Đối với Columnhành vi tương tự, hãy thử:

  return Wrap(
          direction: Axis.vertical,
          spacing: 10,
          children: <Widget>[...],);

Đối với Rowhành vi tương tự, hãy thử:

  return Wrap(
          direction: Axis.horizontal,
          spacing: 10,
          children: <Widget>[...],);

Để biết thêm thông tin: Wrap (Flutter Widget)

Sử dụng dòng mã này bên trong Cột. Đối với wrap_content: mainAxisSize: MainAxisSize.min Đối với match_parent:mainAxisSize: MainAxisSize.max

Thực ra có một cách rất dễ dàng và gọn gàng để làm điều này.

Sử dụng FractionallySizedBoxwidget.

FractionallySizedBox(
  widthFactor: 1.0, // width w.r.t to parent
  heightFactor: 1.0,  // height w.r.t to parent
  child: *Your Child Here*
}

Tiện ích này cũng rất hữu ích khi bạn muốn định kích thước con mình bằng một phần nhỏ so với kích thước của cha mẹ nó.

Thí dụ:

Nếu bạn muốn con chiếm 50% chiều rộng của cha mẹ, hãy cung cấp widthFactornhư0.5

Để làm cho một đứa trẻ điền vào cha mẹ của nó, chỉ cần bọc nó vào một FittedBox

    FittedBox(
     child: Image.asset('foo.png'),
     fit: BoxFit.fill,
   )