Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Before, I wrote an App to show the requirements of the upgrade popup box. The general style is as follows:

Among them, the number of upgrade instructions is not fixed, but can be more or less, so the requirements to be met are as follows: the height of the pop-up frame should adapt to the number of upgrade items, but for the sake of beauty, the height should not exceed 600, when there are many items need to scroll. To do so, use the maxHeight property of Listview + Flexible + Container. The initial code looks like this:

@override Widget build(BuildContext context) { return Container( padding: EdgeInsets.symmetric(horizontal: 30), constraints: BoxConstraints( maxHeight: 700 ), color: Colors.white, width: 500, child: Column( mainAxisSize: MainAxisSize. Min, children: <Widget>[Container(padding: const EdgeInsets. All (20), child: Text("新 的 ",style: TextStyle( color: Colors.black, fontSize: 50,)), ), listItems(), Container( padding: const EdgeInsets.all(20), child: Text-indent (" color: color.red, fontSize: 30,); text-indent (" color: color.red, fontSize: 30,); text-indent (" color: color.red, fontSize: 30,); } Widget listItems() { List<Widget> updateList = []; list.forEach((item) { updateList.add(Text( '$item', style: TextStyle( color: Colors.black, fontSize: 30,), )); }); return Flexible( child: ListView( children: updateList, ), ); }Copy the code

MaxHeight, ListView, and Flexible are all available, but when running, the problem is found: the height will still reach the maxHeight maximum of 600 even when there are few entries in the upgrade text. Think about it because the ListView automatically extends the height to the maximum height it can reach for the parent layout. ShrinkWrap: Set ListView’s shrinkWrap to true.

ListView(
   shrinkWrap: true,
   children: updateList,
)      
Copy the code

** This property determines whether the length of a list is only the length that wraps its contents. The default value is false, which means that the listView is automatically extended to maximum height by default. Almost all scrolling components have this property. In fact, this attribute has been used before, and its meaning was not thoroughly studied at the time. Take this opportunity to review the properties in the ListView component:

ListView({
  Axis scrollDirection = Axis.vertical,
  ScrollController controller,
  ScrollPhysics physics,
  bool shrinkWrap = false,
  EdgeInsetsGeometry padding,
  this.itemExtent,
  double cacheExtent,
  List<Widget> children = const <Widget>[],
})
Copy the code
  • ScrollDirection: Indicates the scrolling direction of the list. Options include Axis horizontal and vertical.
  • Controller: a controller related to list scrolling, such as listening for list scrolling events;
  • Physics: The effect of scrolling a list to the edge. Android and iOS have different effects. Android has a ripple effect (for ClampingScrollPhysics), and iOS has a BouncingScrollPhysics elastic effect (for BouncingScrollPhysics). If you want to their effect on different platforms can use AlwaysScrollableScrollPhysics, it according to the different platform automatically choose their physics. If you want to disable in the edge of the drag effect, it can use NeverScrollableScrollPhysics;
  • ShrinkWrap: This property determines whether the length of the list is just the length to wrap its contents. When a ListView is embedded in an infinite container component, shrinkWrap must be true, otherwise Flutter will warn you;
  • Padding: List inner margin;
  • ItemExtent: length of a child element. Specifying this value when the length of each item in the list is fixed helps improve the performance of the list (because it helps the ListView calculate the position of each element before actually rendering the child elements);
  • cacheExtent: The ListView leaves a -cacheextent area on either side of its visible area as a pre-rendered area (for lists created by the ListView.build or ListView.separated constructor, Child elements that are not in the viewable and prerendered areas will not be created or destroyed);
  • Children: An array of components that hold child elements.

The code address