记Flutter ListTile和Row以及ListView的爱恨情仇

最开始写的代码如下：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("FlutterDemo")),
        body: HomeContent(),
      ),
    );
  }
}

class HomeContent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        child: ListView(
      children: [
        AspectRatio(
          aspectRatio: 16 / 9,
          child: Container(
            child: Image.network(
              "https://img1.baidu.com/it/u=2395057492,3454575227&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=888",
              fit: BoxFit.cover,
            ),
          ),
        ),
        Row(children: [
          CircleAvatar(
              child: Text("gao"),
              backgroundImage: NetworkImage(
                  "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353")),
          ListTile(
            leading: CircleAvatar(
              backgroundImage: NetworkImage(
                  "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353"),
            ),
            title: Text("gaoxing"),
            subtitle: Text("happy"),
          )
        ]),
      ],
    ));
  }
}

显示如下：

ListTile控件里面的内容没有显示，换成别的控件（如：Container）试试：

Row(children: [
  CircleAvatar(
      child: Text("gao"),
      backgroundImage: NetworkImage(
          "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353")),
  // ListTile(
  //   leading: CircleAvatar(
  //     backgroundImage: NetworkImage(
  //         "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353"),
  //   ),
  //   title: Text("gaoxing"),
  //   subtitle: Text("happy"),
  // )
  Container(
    width: 300,
    height: 300,
    color: Colors.blue,
  )
]),

运行结果如下：

查阅资料：www.jianshu.com/p/79dcf25b8…

ListTile常用来在 Flutter 中填充 ListView。把ListTile提出到ListView试试：

Row(children: [
  CircleAvatar(
      child: Text("gao"),
      backgroundImage: NetworkImage(
          "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353")),
]),
ListTile(
  leading: CircleAvatar(
      backgroundImage: NetworkImage(
          "https://img2.baidu.com/it/u=712694738,3554631191&fm=253&fmt=auto&app=120&f=JPEG?w=500&h=353")),
  title: Text("gaoxing"),
  subtitle: Text("happy"),
)

运行结果如下：

显示出来了。