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 documentation：

alignment→WrapAlignment

如何将跑步中的孩子放置在主轴上。

我想你想读WrapAlignment enumeration：

Wrap(
alignment: WrapAlignment.spaceBetween, 
[...]
)

请注意，这将不完全代表您在图片中绘制的内容。这不会放大孩子以使其充满剩余空间。这将在子元素之间划分空白空间，在第一个元素或最后一个元素之后没有空格，这与“ Justify Alignment”的结束符相同。

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

1 个答案: