带 ListView 的 AppBar (Flutter)

Question

我是 Flutter 的初学者，我按照教程制作了一个带有图片的 ListView。但是，我有点迷失在代码中，我不知道在哪里实现我的 AppBar。我已经尝试过几次但从未成功。我希望你能帮助我，这是代码：

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';


class ListViewExample extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return new ListViewExampleState(
    );
  }
}

class ListViewExampleState extends State<ListViewExample>{
  List<Container> _buildListItemsFromItems(){
    int index = 0;
    return item.map((item){

      var container = Container(
        decoration: index % 2 == 0?
        new BoxDecoration(color: const Color(0xFFFFFFFF)):
          new BoxDecoration(
            color: const Color(0xFFFAFAF5)
          ),
        child: new Row(
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.all(5.0),
              child: new CachedNetworkImage(
                imageUrl: item.imageURL,
                width: 200.0,
                height: 100.0,
                fit: BoxFit.cover,
              ),
            ),

            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
  
                new Text(
                    item.title,
                    style: new TextStyle(),
                  ),
                new Text(
                    item.description,
                  ),

                ]
            )
            

          ],
        )
      );

      index = index + 1;
      return container;
    }).toList();
  }
  @override
  Widget build(BuildContext context) {
    return new ListView(
      children: _buildListItemsFromItems(),
    );
  }
}

如果您需要更多资源，我会发给您，谢谢。

更新：我在 Scaffold

中的 ListView 之外添加了 AppBar

Answer 1

您必须在脚手架中使用 AppBar，而不是像这样在列表视图中使用：

import 'package:flutter/material.dart';
import 'package:cached_network_image/cached_network_image.dart';
import '../recyclerview/data.dart';


class ListViewExample extends StatefulWidget {
  @override 
  State<StatefulWidget> createState() {
    return new ListViewExampleState(
    );
  }
}

class ListViewExampleState extends State<ListViewExample>{
  List<Container> _buildListItemsFromItems(){
    int index = 0;
    return item.map((item){

      var container = Container(
        decoration: index % 2 == 0?
        new BoxDecoration(color: const Color(0xFFFFFFFF)):
          new BoxDecoration(
            color: const Color(0xFFFAFAF5)
          ),
        child: new Row(
          children: <Widget>[
            new Container(
              margin: new EdgeInsets.all(5.0),
              child: new CachedNetworkImage(
                imageUrl: item.imageURL,
                width: 200.0,
                height: 100.0,
                fit: BoxFit.cover,
              ),
            ),

            new Row(
              mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
  
                new Text(
                    item.title,
                    style: new TextStyle(),
                  ),
                new Text(
                    item.description,
                  ),

                ]
            )
            

          ],
        )
      );

      index = index + 1;
      return container;
    }).toList();
  }
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
       appBar: AppBar(),
       body: ListView(
      children: _buildListItemsFromItems(),
    ),
    );
  }
}

带 ListView 的 AppBar (Flutter)

AppBar with a ListView (Flutter)

listview

appbar

dart

flutter