Flutter Dart 中的 SizedBox 或容器

Question

我剛剛開始了我在 Flutter(Dart) 中的編碼之旅。 我正在嘗試設計一個 UI，我已經取得了一點成功，但並沒有讓我內心平靜：P

所以，實際上我正在嘗試設計一個類似卡片的結構，當我點擊/點擊它時，它應該展開並顯示更多數據和一個按鈕。

最終，我成功地使用了一個名為 isExpanded 的 boolean 變量來更改單擊時的高度。 但是當我再次點擊容器（Inkwell 功能）時，它會顯示渲染彈性問題。

所以，我想從你們那里得到一些幫助，我只是這方面的新手，當我有足夠的知識時，我會幫助別人。

所以，我需要這些設計

我需要的設計

點擊時的設計，它應該展開，再次點擊時它不應該顯示渲染彈性錯誤

我以某種方式創造的設計哈哈：P

請提供一些建議甚至是所需布局的代碼，我將很高興為您提供幫助

謝謝

Answer 1

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

SizedBox 主要用於給出 widges 之間的大小

容器小部件主要用作父小部件，您可以在其中為子小部件實現不同的屬性，如顏色、邊框半徑......

你需要做的是：-

這可以通過多種方式實現，例如使用動畫和所有...

但是，我更喜歡你檢查是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(),
    );
  }
}

你會有一些想法

謝謝

Answer 2

好的，您可以使用 ExpandablePanel 小部件實現您的目標。 我用過這個package 。 我試過這樣的事情。 這些 buildCollapsed()、buildExpanded()、expandColumn() 是根據您的需要定制的 function。

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

為了更好地理解，go 通過 package 文檔，如果您有任何問題，請告訴我。