gpt4 book ai didi

flutter - 带有ListView的AppBar(Flutter)

转载 作者:行者123 更新时间:2023-12-03 04:12:41 25 4
gpt4 key购买 nike

我是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中使用AppBar,而不是像这样在listview中使用:

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(),
),
);
}
}

关于flutter - 带有ListView的AppBar(Flutter),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64298021/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com