Flutter Dart 中的 SizedBox 或 Container

Posted 2023-02-23

【中文标题】Flutter Dart 中的 SizedBox 或 Container

【英文标题】：SizedBox or Container in Flutter Dart

【发布时间】：2022-01-18 13:16:00

【问题描述】：

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

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

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

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

所以，我需要这些设计

The design I need

The design when it is clicked, it should expand and when clicked again it shouldn't show render flex error

The design which I have somehow created lol :P

请提供一些建议，甚至是所需布局的代码，我会很高兴为您提供帮助

谢谢

【问题讨论】：

如何在订单号左侧添加倒计时加载器

Stepper Widget 可能对你有帮助

第二个选项cupertino_stepper

【参考方案1】：

您不能为此使用 SizedBox 或容器。

SizedBox 主要用于给出小部件之间的大小

容器小部件主要用作父小部件，您可以在其中为子小部件实现不同的属性，如颜色、边框半径……

你要做的是：-

这可以通过多种方式实现，例如使用动画等等......

但是，我希望你检查的是 ExpansionPanel

在这里，您可以在点击时展开卡片。

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

你会有一些想法

谢谢

【参考方案2】：

好的，您可以使用 ExpandablePanel 小部件实现您的目标。我用过这个package。我试过这样的事情。这些 buildCollapsed()、buildExpanded()、expandColumn() 是根据您的需要定制的函数。

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
) '

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