Flutter Wrap 小部件对齐:留在 ExpansionPanel 内

Sam*_*ord 1 widget alignment flutter

这很奇怪,包含 FilterChips 的 Wrap 小部件在其父级 ExpansionPanel 内居中。我试过将 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,
              ),
        ])
    );
Run Code Online (Sandbox Code Playgroud)

我是 Scoobied,感谢帮助。

在此处输入图片说明

Bur*_*rak 19

Wrap有一个alignment可用于对齐子项的属性。 https://api.flutter.dev/flutter/widgets/Wrap/Wrap.html

Wrap(
  ...
  alignment: WrapAlignment.center,
  children: [],
),
Run Code Online (Sandbox Code Playgroud)


Sam*_*ord 7

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

 Align(
            alignment: Alignment.topLeft, 
child: Wrap(....
Run Code Online (Sandbox Code Playgroud)

我不喜欢我的解决方案,我很担心嵌套对性能的影响太大,而且庞大的代码会损害易读性,所以如果您有更好的解决方案,我会全神贯注。×山姆。