我撰寫代碼以在第一次加載螢屏時在 Gridview 中添加和洗掉列，一切看起來都很好，但是當我單擊列內的交叉按鈕洗掉任何列時，它會破壞布局，并且每當我單擊以洗掉它顯示的列時都不會洗掉任何列錯誤
錯誤：SliverGeometry 無效：“maxPaintExtent”小于“paintExtent”。
錯誤影像：單擊/洗掉專案期間的布局錯誤
這是我的代碼：-
import 'package:flutter/material.dart';
import 'package:mindmatch/utils/widget_functions.dart';
import 'package:mindmatch/custom/BorderIcon.dart';
import 'package:mindmatch/screens/Relation.dart';
import 'package:flutter_svg/flutter_svg.dart';
void main() {
runApp(new MaterialApp(
home: new Photos(),
));
}
class Photos extends StatefulWidget {
var usrid;
Photos({Key? key, @required this.usrid}) : super(key: key);
@override
_Photos createState() => _Photos();
}
class _Photos extends State<Photos>{
int counter = 0;
//List<Widget> _list = new List<Widget>();
List<Widget> _list = <Widget> [];
@override
void initState() {
for(int i =0; i < 4; i ){
Widget child = _newItem(i);
_list.add(child);
}
}
void on_Clicked() {
Widget child = _newItem(counter);
setState(() => _list.add(child));
}
Widget _newItem(int i) {
Key key = new Key('item_${i}');
Column child = Column(
key: key,
children: [
Stack(
children: [
Card(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xffa1a1a1),
),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
child: SizedBox(
//width: 300,
height: 100,
child: Center(child:
Icon(
Icons.image,
color: Color(0xffcccccc),
size: 60,
),
),
),
),
Positioned(
top: 9,
right: 9,
child: InkWell(
onTap: () => _removeItem(key),
child: SvgPicture.asset(
width: 20,
'assets/images/close.svg',
height: 20,
),
),
)
]
),
]
);
counter ;
return child;
}
void _removeItem(Key key){
for(int i = 0; i < _list.length; i ){
Widget child = _list.elementAt(i);
if(child.key == key){
setState(() => _list.removeAt(i));
print('Removing ${key.toString()}');
}
}
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Photos'),
backgroundColor: Colors.deepPurpleAccent,
),
floatingActionButton: new FloatingActionButton(onPressed: on_Clicked, child: new
Icon(Icons.add),),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: Column(
children: [
Expanded(
child: GridView(
//padding: const EdgeInsets.all(8.0),
gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 15,
//childAspectRatio: 2/1,
),
children: _list,
)
)
],
),
),
);
}
}
這是我的輸出：-代碼的輸出影像清楚地看到添加和洗掉功能
請幫助我如何完成這項任務以及如何在 Gridview 中添加和洗掉列，請幫助我。
這就是我需要做的：-這是我想要創建的實際布局 所以請幫助我
uj5u.com熱心網友回復：
您不應該直接操作小部件，而是操作資料。您應該存盤在串列中的是您希望在視圖中呈現的資料（影像 URL 或一些字串，這可能是一個非常復雜的資料結構），并使用顫振的setState功能使視圖回應物件串列上發生的變化。
嘗試這個：
import 'package:flutter/material.dart';
void main() {
runApp(new MaterialApp(
home: new Photos(),
));
}
class Photos extends StatefulWidget {
var usrid;
Photos({Key? key, @required this.usrid}) : super(key: key);
@override
_Photos createState() => _Photos();
}
class _Photos extends State<Photos> {
int counter = 0;
//List<Widget> _list = new List<Widget>();
List<String> _list = <String>[];
@override
void initState() {
for (int i = 0; i < 4; i ) {
_list.add("your data -obj");
}
}
void on_Clicked() {
setState(() => _list.add("your data -obj"));
}
Widget _newItem(int i) {
Key key = new Key('item_${i}');
Column child = Column(key: key, children: [
Stack(children: [
Card(
elevation: 0,
shape: RoundedRectangleBorder(
side: BorderSide(
color: Color(0xffa1a1a1),
),
borderRadius: BorderRadius.all(Radius.circular(12)),
),
child: SizedBox(
//width: 300,
height: 80,
child: Center(
child: Icon(
Icons.image,
color: Color(0xffcccccc),
size: 60,
),
),
),
),
Positioned(
top: 9,
right: 9,
child: InkWell(onTap: () => _removeItem(i), child: Text('close')),
)
]),
]);
counter ;
return child;
}
void _removeItem(int i) {
print("====remove $i");
print('===Removing $i');
setState(() => _list.removeAt(i));
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Photos'),
backgroundColor: Colors.deepPurpleAccent,
),
floatingActionButton: new FloatingActionButton(
onPressed: on_Clicked,
child: new Icon(Icons.add),
),
body: new Container(
padding: new EdgeInsets.all(32.0),
child: Column(
children: [
Expanded(
child: GridView(
//padding: const EdgeInsets.all(8.0),
gridDelegate:
const SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 3,
crossAxisSpacing: 10.0,
mainAxisSpacing: 15,
//childAspectRatio: 2/1,
),
children: List.generate(_list.length, (index) {
//generating tiles with people from list
return _newItem(index);
})))
],
),
),
);
}
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/495057.html
下一篇：如何在顫動中將小部件與右下角對齊