ButtonBar处理行溢出？

Question

我的卡里有一个ButtonBar。我想插入按钮，直到结束的卡片，然后他们将在一个新的线。

唯一的问题是溢出。

我读到ButtonBar可以处理溢出并继续插入的新行，这是真的吗？我该怎么做？

你认为用Row来处理这种情况更好吗？

child: SizedBox(
            width: MediaQuery.of(context).size.width*0.94,
            height: MediaQuery.of(context).size.height*0.3,
            child : Card(
              elevation: 3.0,
              child: Row(
                children: <Widget>[
                  Align(
                    alignment: Alignment(0,-1),
                    child : ButtonBar(
                      overflowDirection: ,
                      //mainAxisSize: MainAxisSize.max,
                      children: <Widget>[
                        new RaisedButton(
                          onPressed: null,
                          child: Text("One",
                          style: TextStyle(
                            color: Colors.black,
                            ),
                          ),
                          disabledColor: Colors.orange,
                          ),
                        new RaisedButton(
                          onPressed: null,
                          child: Text("Two",
                            style: TextStyle(
                              color: Colors.black,
                            ),
                          ),
                          disabledColor: Colors.lightGreen,
                        ),
                          new RaisedButton(
                            onPressed: null,
                            child: Text("Three",
                            style: TextStyle(
                              color: Colors.black,
                              ),
                            ),
                            disabledColor: Colors.yellowAccent,
                              ),
                        new RaisedButton(
                          child: Text("Four",
                          style: TextStyle(
                            color: Colors.black,
                            ),
                          ),
                          disabledColor: Colors.blue,
                        ),
                        new RaisedButton(
                          child: Text("Five",
                            style: TextStyle(
                              color: Colors.black,
                            ),
                          ),
                          disabledColor: Colors.red,
                        ),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                 ),

Answer 1

你可以用ButtonBar试试

示例

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ButtonBar(
      alignment: MainAxisAlignment.start,
      children: List.generate(
        7,
        (index) => RaisedButton(
          onPressed: () {},
          child: Text("Button $index"),
        ),
      ),
    );
  }
}

输出：用ButtonBar

但我想你要找的是Wrap

示例：

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 2.0,
      children: List.generate(
        50,
        (index) => RaisedButton(
          onPressed: () {},
          child: Text("Button $index"),
        ),
      ),
    );
  }
}

输出：裹着