Flutter Wrap widget align: left inside ExpansionPanel

Question

这很奇怪，包含 FilterChips 的 Wrap 小部件在其父级 ExpansionPanel 中居中。我试过将 Wrap Widget 包装在 Flexible 小部件中，没有反应，我尝试过将 Wrap Widget 包装在 Expanded 小部件中，没有反应。

扩展面板上似乎没有 属性 左对齐正文：小部件。这很重要，因为当 Wrap 小部件被强制为全宽时，一些 ExpansionPanel 向左对齐，而其他的（如图所示）居中。最终，我将把 ExpansionPanel 中的所有子小部件包装在一个 Padding 小部件中，但我需要子 Wrap 小部件先左对齐。

bool travelSack;
ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
            value: "Backpacking",
            headerBuilder: (BuildContext context, bool isExpanded) {
              return ListTile(
                leading: FaIcon(
                  FontAwesomeIcons.globeEurope,
                  size: 19,
                ),
                title: Text("Backpacking"),
              );
            },
            body: Expanded(child:
            Wrap(spacing: 4, children: [
              FilterChip(
                showCheckmark: false,
                label: Text('Travel rucksack'),
                labelStyle: TextStyle(
                  color: travelSack ? Colors.black : Colors.white,
                ),
                selected: travelSack,
                onSelected: (bool selected) {
                  setState(() {
                    travelSack = !travelSack;
                  });
                },
                selectedColor: Colors.green.shade500,
                backgroundColor: Colors.grey.shade500,
              ),
        ])
    );

我是 Scoobied，感谢帮助。

Answer 1

我通过将 Wrap 小部件嵌套在 Align 小部件中解决了这个问题：

 Align(
            alignment: Alignment.topLeft, 
child: Wrap(....

我不喜欢我的解决方案，我担心过多的嵌套对性能的影响以及庞大的代码会损害易读性，所以如果您有更好的解决方案，我会全神贯注。 x 山姆

Answer 2

Wrap 有一个 alignment 属性 可以用来对齐 children。 https://api.flutter.dev/flutter/widgets/Wrap/Wrap.html

Wrap(
  ...
  alignment: WrapAlignment.center,
  children: [],
),

Answer 3

我遇到了同样的问题，用 SizedBox 解决了：

ExpansionPanelRadio backpackingPanel = ExpansionPanelRadio(
  value: "Backpacking",
  headerBuilder: (BuildContext context, bool isExpanded) {},
  body: SizedBox(
    width: double.infinity, // Use when direction: Axis.horizontal
    height: double.infinity, // Use when direction: Axis.vertical
    child: Wrap(
      spacing: 4,
      children: [
        FilterChip(
          showCheckmark: false,
          label: Text('Travel rucksack'),
          labelStyle: TextStyle(
            color: travelSack ? Colors.black : Colors.white,
          ),
          selected: travelSack,
          onSelected: (bool selected) {
            setState(() {
              travelSack = !travelSack;
            });
          },
          selectedColor: Colors.green.shade500,
          backgroundColor: Colors.grey.shade500,
        ),
      ],
    ),
  ),
);

切记不要同时使用宽度和高度SizedBox 属性，每个Wrap.direction.

Reference