具有对齐对齐功能的 Flutter Wrap 小部件

Question

是否可以在 Wrap 小部件中对齐小部件？这就是我目前所拥有的：

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child:       Wrap(
        spacing: 20,
        runSpacing: 10,
        children: [
          ToggleButton(
          title: 'Button 1',
          selected: false,
        ),
                    ToggleButton(
          title: 'My second button',
          selected: false,
        ),
                    ToggleButton(
          title: 'Third button',
          selected: false,
        ),
                    ToggleButton(
          title: 'This is button number four',
          selected: false,
        ),
                    ToggleButton(
          title: 'Final button long',
          selected: false,
        )
        ],
      ),
      ),
    );
  }
}

class ToggleButton extends StatefulWidget {
  const ToggleButton(
      {this.selected = false, this.title = '', this.onSelectedChanged});

  final bool selected;
  final String title;
  final Function(String title, bool selected) onSelectedChanged;

  @override
  _ToggleButtonState createState() => _ToggleButtonState();
}

class _ToggleButtonState extends State<ToggleButton> {
  bool selected;

  @override
  void initState() {
    selected = widget.selected;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 36,
      child: RaisedButton(
        child: Row(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            Text(widget.title),
            SizedBox(width: 15),
            IgnorePointer(
              child: Checkbox(
                materialTapTargetSize: MaterialTapTargetSize.shrinkWrap,
                value: selected,
                onChanged: (bool value) {},
              ),
            )
          ],
        ),
        color: selected
            ? Colors.blue
            : Colors.white,
        textColor: selected
            ? Colors.white
            : Colors.black.withAlpha(80),
        onPressed: () {
          setState(() {
            selected = !selected;
            if (widget.onSelectedChanged != null) {
              widget.onSelectedChanged(widget.title, selected);
            }
          });
        },
      ),
    );
  }
}

这给了我这个：

但我想要实现的是：

基本上是让每一行扩展以填充可用空间。那可能吗？也许我需要以ToggleButton不同的方式构建我的？

我知道对齐：WrapAlignment.spaceBetween但这不起作用，特别是当你的容器较小并且最终会得到这样的结果时：

或这个：

两者都非常丑陋......

谢谢你！

Answer 1

来自Flutter 文档：

\n

\n

对齐 \xe2\x86\x92 WrapAlignment

\n

应如何将运行中的子项放置在主轴中。

\n

\n

阅读WrapAlignment 枚举，我想您想要：

\n

Wrap(\nalignment: WrapAlignment.spaceBetween, \n[...]\n)\n

\n

请注意，这并不完全代表您在图片中绘制的内容。这不会放大子项以使其填充剩余空间。这将划分子元素之间的空白空间，第一个元素之前或最后一个元素之后没有空间，这与“对齐对齐”等效。

\n