Flutter 有没有办法在listview生成器中为每个容器添加不同的图像?
当按下“添加图像”按钮到相应的容器时,我不想通过打开相机来添加图像。如何做到这一点Flutter 有没有办法在listview生成器中为每个容器添加不同的图像?,flutter,flutter-layout,Flutter,Flutter Layout,当按下“添加图像”按钮到相应的容器时,我不想通过打开相机来添加图像。如何做到这一点 import 'dart:io'; import 'package:image_picker/image_picker.dart'; import 'package:flutter/material.dart'; final Color darkBlue = Color.fromARGB(255, 18, 32, 47); void main() { runApp(MyApp()); } class M
import 'dart:io';
import 'package:image_picker/image_picker.dart';
import 'package:flutter/material.dart';
final Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
debugShowCheckedModeBanner: false,
home: HomeScreen());
}
}
class HomeScreen extends StatefulWidget {
@override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
List<Model> list = [];
@override
void initState() {
super.initState();
list.add(Model([null,null,null]));
}
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text('Track Assets'),
),
//use ListView.builder for dynamic content
body: ListView.builder(
padding: EdgeInsets.all(15),
itemCount: list.length,
shrinkWrap: true,
itemBuilder: (con, ind) {
return Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.grey.withAlpha(70),
),
padding: EdgeInsets.all(10),
child: Column(
children: <Widget>[
Row(children: [
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text('Freezer',
style: TextStyle(
color: Colors.black,
fontSize: 16,
fontWeight: FontWeight.bold)),
Text('Lorem Ipsum',
style: TextStyle(
color: Colors.black, fontSize: 15))
]),
SizedBox(width: 25),
Icon(Icons.check_circle, color: Colors.black),
Expanded(child: SizedBox()),
Column(children: [
SizedBox(
width: 150,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
color: Colors.grey,
onPressed: () {
//todo
},
child: Text('Track',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold))),
),
SizedBox(
width: 150,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
color: Colors.grey,
onPressed: () {
//todo
},
child: Text('Relocate',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold))),
),
SizedBox(
width: 150,
child: FlatButton(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(7),
),
color: Colors.grey,
onPressed: () {
//todo
},
child: Text('Add Images',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.bold))),
),
]),
]),
Divider(
color: Colors.grey,
thickness: 0.7,
indent: 25,
endIndent: 25,
),
ListView.builder(
shrinkWrap:true,
scrollDirection:Axis.horizontal,
itemCount:list[ind].images==null?1: list[ind].images.length+1,
itemBuilder:(con2,ind2){
return list[ind].images.length==ind ?
FlatButton(
child: Icon(Icons.add_circle, color: Colors.grey),
onPressed:(){
getImage(ind);
}): Image.file(list[ind].images[ind2]);
}
),
],
));
}),
);
}
Future getImage(int listIndex) async {
var image = await ImagePicker.pickImage(source: ImageSource.camera);
if(image!=null)
setState(() {
if(list[listIndex].images == null)
list[listIndex].images = [];
list[listIndex].images.add(image);
});
}
}
class Model {
List<File> images;
//or use network path
//String path;
//other properties
Model(this.images);
}
您可以为输出创建两个单独的小部件,也可以将其合并为一个,只需在没有数据时隐藏图像显示小部件。使用StreamBuilder可以给我看一个示例代码吗?我可以使用此代码水平添加3个以上的图像吗?如listview.builder?可以!您可以添加3个以上!get image函数有2个参数,并且仅通过一个参数调用。对不起!删除函数中的第二个参数!如果删除,则此语句将是什么=>list[listIndex].images[imageIndex]=image;