SizedBox or Container in Flutter Dart

Question

我刚刚开始了Flutter(Dart(的编码之旅。我正在尝试设计一个UI，我已经成功了一点，但并没有达到我内心的平静：P

所以，实际上我正在尝试设计一个类似卡片的结构，当我点击/点击它时，它应该展开并显示更多的数据和一个按钮。

最终，我成功地使用了一个名为isExpanded的布尔变量来更改单击时的高度。但当我再次点击容器(Inkwell功能(时，它显示了渲染弹性问题。

所以，我想从你们那里得到一些帮助，我只是这方面的新手，当我获得好的知识时，我保证我也会帮助别人。

所以，我需要这些设计

我需要的设计

当它被点击时，它应该展开，当再次点击时，不应该显示呈现弹性错误

我以某种方式创造的设计lol:p

请给出一些建议，甚至所需布局的代码，我将很高兴得到你的帮助

谢谢

Answer 1

您不能使用SizedBox或容器来实现这一点。

SizedBox主要用于提供宽度之间的大小

容器窗口小部件主要用作父窗口小部件，您可以在其中实现不同的属性，如颜色、边界半径，。。。对于子窗口小部件

您要做的是：-

这可以通过多种方式实现，比如使用动画和所有。。。

但是，我希望您检查一下是扩展面板

在这里，您可以在点击时扩展您的卡。

使用ExpansionPanel时，必须使用ExpansionPanelList

因此，您可以列出ExpansionPanel。

试试这个代码：-

import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
// stores ExpansionPanel state information
class Item {
Item({
required this.expandedValue,
required this.headerValue,
this.isExpanded = false,
});
String expandedValue;
String headerValue;
bool isExpanded;
}
List<Item> generateItems(int numberOfItems) {
return List<Item>.generate(numberOfItems, (int index) {
return Item(
headerValue: 'Panel $index',
expandedValue: 'This is item number $index',
);
});
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({Key? key}) : super(key: key);
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
final List<Item> _data = generateItems(8);
@override
Widget build(BuildContext context) {
return SingleChildScrollView(
child: Container(
child: _buildPanel(),
),
);
}
Widget _buildPanel() {
return ExpansionPanelList(
expansionCallback: (int index, bool isExpanded) {
setState(() {
_data[index].isExpanded = !isExpanded;
});
},
children: _data.map<ExpansionPanel>((Item item) {
return ExpansionPanel(
headerBuilder: (BuildContext context, bool isExpanded) {
return ListTile(
title: Text(item.headerValue),
);
},
body: ListTile(
title: Text(item.expandedValue),
subtitle:
const Text('To delete this panel, tap the trash can icon'),
trailing: const Icon(Icons.delete),
onTap: () {
setState(() {
_data.removeWhere((Item currentItem) => item == currentItem);
});
}),
isExpanded: item.isExpanded,
);
}).toList(),
);
}
}

你会有一些想法

谢谢

Answer 2

好的，您可以使用ExpandablePanel小部件来实现您的目标。我用过这个包裹。我试过这样的东西。这些buildCollapsed((、buildExpanded((和expandedColumn((是根据您的需要定制的函数。

ExpandablePanel(
theme: const ExpandableThemeData(
headerAlignment:
ExpandablePanelHeaderAlignment.center,
//tapBodyToExpand: true,
//tapBodyToCollapse: true,
hasIcon: false,
),
header: Expandable(
collapsed: buildCollapsed(), // widget header when the widget is Collapsed
expanded: buildExpanded(), // header when the widget is Expanded
),
collapsed: Container(), // body when the widget is Collapsed, I didnt need anything here. 
expanded:  expandedColumn() // body when the widget is Expanded
) '

为了更好地理解，请浏览包装文档，如果您有任何问题，请告诉我。