Fultter list component

Attributes

Case

import 'package:flutter/material.dart';

void main() {
    
    
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new Center(
      child: ListView(
        children: <Widget>[
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
            subtitle: Text("THIS IS subtitle"),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
          ),
          ListTile(
            leading: Icon(Icons.phone),
            title: Text(
              " this is list",
              style: TextStyle(fontSize: 28),
            ),
            subtitle: Text("THIS IS subtitle"),
          )
        ],
      ),
    );
  }
}

Implement level listview

   关键代码：scrollDirection: Axis.horizontal,

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

void main() {
    
    
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("关于Text属性的界面"),
        ),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
    
    
  @override
  Widget build(BuildContext context) {
    
    
    return new Center(
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: <Widget>[
          Container(
            width: 180,
            color: Colors.lightBlue,
          ),
          Container(
            width: 180,
            color: Colors.amber,
            child: ListView(
              children: <Widget>[
                Image.network(
                    "https://pic.baike.soso.com/ugc/baikepic2/0/20180926123725-2140348888_png_400_400_25800.jpg/300"),
                SizedBox(height: 16.0),
                Text(
                  "这时一个文本信息",
                  textAlign: TextAlign.center,
                  style: TextStyle(fontSize: 16.0),
                )
              ],
            ),
          ),
          Container(
            width: 180,
            color: Colors.deepOrange,
          ),
          Container(
            width: 180,
            color: Colors.deepPurpleAccent,
          )
        ],
      ),
    );
  }
}