The previous two articles introduced the installation of the Flutter Win environment and a simple layout using listView. (This article is a bit long, taking about 8.88 minutes to read.)

Flutter entry implements the ListView list page and favorites page

Build and Pit fill guides for the Flutter environment (Win10 and Android already available)

This article mainly introduces the following contents:

1. What can be done with ListView?

2. How do I add widgets to the ListView?

3. ListView click event, single widget click event

4. (Emphasis) How to place widgets vertically and horizontally?

5. Easy use of images, ICONS and Text widgets

This article introduces the implementation of a ListView list page and a favorite page. The implementation of a list has not been studied carefully, but we will start by studying the implementation of ListView.

Let’s take a look at the previous implementation:

RandomWordsState 

returnNew ListTile(// 查 看 全 部 layout title: new Text(pg.aspascalcase, style: _biggerFont,), // 查 看 全 部 layout trailing: new Icon( alreadySaved ? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Color.red: null,), // The click event of the ListView item onTap: () {// notifies the frame that the state has changedsetState(() {
          if (alreadySaved) {
            _saved.remove(pair);
          } else{ _saved.add(pair); }}); });Copy the code

As you can see from the code above, the main implementation of the ListTile Widget is to manipulate the ListTile constructor. The comments are written in the code

/// Requires one of its ancestors to be a [Material] widget. const ListTile({ Key key, // Add widget to the left of the list (as shown in the left image) this.leading, // title this.title, // subtitle this.subtitle, This.trailing, // If isThreeLine istrue, subtitle cannot be null. The default value is nullfalse// If the subtitle is empty, the list is displayed in a tiled line. If the subtitle is not empty, the subtitle occupies two lines in the layouttrueThe subtitle can display three lines. this.isThreeLine =false// bool by defaultfalseIf fortrueThe ListTile is placed vertically in a dense way. This.dense, // Margin of the content this.contentPadding, // can you click this.enabled = on itemtrue// item click event this.onTap, // item long press event this.onLongPress, // item check whether the tag this.selected =false,})Copy the code

The development language of Flutter is Dart. Dart is a language I haven’t studied before, so I won’t go into depth here. There are some good articles on the Internet. I will only write to achieve the effect shown in the picture above.

1. What can be done with ListView?

ListView not only implements list layout, but also implements the functions of ScrollView in Android. There are other implementations of scrollable widgets, see introduction to Scrollable Widgets **

Implement the list function, if it is in line with ListTile style, direct use of ListTile implementation is very convenient. (I have not yet learned how to implement multiple layouts, and I will write another article later.)

Implement ScrollView and add our widget directly to the body of the Build method. The pseudocode is as follows:

Defines a DetailScreen detail page that inherits the StatelessWidget and returns the content of the page in the Build method: appBar is the title bar and Body is the displayed content

class DetailScreen extends StatelessWidget {
 // Declare a field that holds the pair
 final WordPair pair;

 // In the constructor, require a pair
 DetailScreen({Key key, @required this.pair}) : super(key: key);

 @override
 Widget build(BuildContext context) {
 returnNew Scaffold(appBar: new appBar (// Receives the passed word title: new Text("${pair.asPascalCase}"Body: new ListView(children: [// display network Image new image.asset ('images/wali.jpg', width: 600.0, height: 240.0, fit: Boxfit.cover,), // titleSection, // buttonSection, // Description text,],); }}Copy the code

2. How do I add widgets to the ListView?

The above pseudocode overwrites the Build method when building a stateful widget, in which the body returns the widget we implemented.

3. ListView click event, single widget click event

If the ListView uses a ListTile to implement the list click, use onTap from the ListTile to implement the list click. Instead of using listtiles, use click events for individual widgets.

If there is an onTap method, the widget can be implemented by calling the method directly. If there is no such method, the GestureDetector needs to implement the click effect, such as the heart like click event in the figure above. The pseudo-code implementation is as follows:

Refer to this article for information about GestureDetector

Trailing: New GestureDetector(// Heart like icon Child: New Icon(alreadySaved? Icons.favorite : Icons.favorite_border, color: alreadySaved ? Color.red: null,), // Click the event onTap: (){// notify that the frame state has changedsetState(() {
            if (alreadySaved) {
              _saved.remove(pair);
            } else{ _saved.add(pair); }}); },),Copy the code

4. How to place widgets vertically and horizontally?

One of the most common layout patterns is to arrange widgets vertically or horizontally. Flutter can arrange widgets horizontally using Row Row and vertically using Column. Also, each child itself can be a Row or a Column, and so on. The following example shows how rows or columns are nested within a row or column.

You can learn how to split the layout when implementing it with the following two images: Reference link Widget layout

Use the mainAxisAlignment and crossAxisAlignment attributes to control row or column alignment of its subitems. For rows, the main axis is horizontal and the horizontal axis is vertical. ** For columns, the main axis is vertical and the horizontal axis is horizontal.

MainAxisAlignment
CrossAxisAlignment
MainAxisAlignment

  • Center → const MainAxisAlignment: The child widgets are centered in the main axis direction

  • End → const MainAxisAlignment: The child widget is displayed to the right in the main axis direction. In horizontal alignment, TextDirection determines whether end is on the left (LTR) or the right (RTL). If it’s vertical, then the VerticalDirection determines whether the end is up or down.

  • Start → const MainAxisAlignment: Child Widgets are displayed to the left in the main axis direction, as is end.

  • SpaceAround → const MainAxisAlignment: The first and last widget in a child widget is half as far from the edge as it is from the middle. (Here is more abstract, the later implementation effect will be explained in passing)

  • SpaceBetween → const MainAxisAlignment: The first and last of the child widgets align, and the remaining child widgets divide the space in between.

  • Spacefinally → const MainAxisAlignment: The child widgets will evenly split the layout space

  • Values → const List

    : Space is allocated according to value alignment. The larger the value is, the more space is allocated.

The CrossAxisAlignment attribute is essentially the same as the one described above.

  • Baseline → const CrossAxisAlignment: Baseline alignment
  • The center – const CrossAxisAlignment
  • The end – const CrossAxisAlignment
  • Start – > const CrossAxisAlignment
  • Stretch to constCrossAxisAlignmentSon:widgetFill the horizontal axis (CrossAxisAlignment) if on the horizontal axisThe child widgetsA lot of them will make the horizontal axis very crowded.
  • Values and constList<CrossAxisAlignment>

Expanded widget

Expanded Widgets, which can be sized to fit rows or columns, have an attribute called Flex (Elasticity factor). By default, each widget has an elasticity factor of 1, which means it fills the layout.

For example, when three images are spread horizontally across the screen, you can use Expanded to wrap the Image and set Flex :1. You don’t have to set flex:1 because flex is 1 by default

The pseudocode is as follows:

body: new Center(
  child: new Row(
    crossAxisAlignment: CrossAxisAlignment.center,
    children: [
      new Expanded(
        child: new Image.asset('images/pic1.jpg'),
      ),
      new Expanded(
        child: new Image.asset('images/pic2.jpg'),
      ),
      new Expanded(
        child: new Image.asset('images/pic3.jpg'),),Copy the code

Gather the widgets

By default, rows or columns take up as much space as possible along their main axis, but if you want to keep children close together, you can set mainAxisSize to mainAxissize.min.

Example implementation: five star icon ICONS compact together.

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    var packedRow = new Row(
      mainAxisSize: MainAxisSize.min,
      children: [
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.green[500]),
        new Icon(Icons.star, color: Colors.black),
        new Icon(Icons.star, color: Colors.black),
      ],
    );

  // ...
}
Copy the code

5. Easy use of images, ICONS and Text widgets

These are basic controls that are simple to use, as described in this documentation: Basic Widgets

After learning the above content we can implement the current style:

Implement lists and a scrollable details page with the title of the word passed by the ListView.

The article is too long, here will not introduce the implementation of the above process, the source address as follows feel also ok to give a star, so that I continue to insist on writing ~ source address

See the source code or do not understand the above can contact me, I will know all words.

In this paper, to the end.