卡片按钮如何像 Flutter 中的 Reddit App 一样组合在一起？

Question

我希望我的卡片按钮像 Reddit 应用程序一样组合在一起。怎么能这样做？

在主行之外有一个 Container 并且 Container' 的填充高度为 15.0 。 Row 的小部件如何响应地适应 15.0 的高度。

Reddit card buttons

My app card buttons

这是我的代码；

@override
  Widget build(BuildContext context) {
    return new SafeArea(
      top: false,
      bottom: false,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new Container(
              padding: EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 3.0),
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  new Container(
                    color: Colors.blueGrey,
                    child: new Row(
                      children: <Widget>[
                        new Icon(Icons.arrow_drop_up),
                        new Text('Vote'),
                        new Icon(Icons.arrow_drop_down),
                      ],
                    ),
                  ),
                  new Container(
                    color: Colors.blueGrey,
                    child: new Row(
                      children: <Widget>[
                        new Icon(Icons.mode_comment),
                        new Text('Comment'),
                      ],
                    ),
                  ),
                  new Container(
                    color: Colors.blueGrey,
                    child: new Row(
                      children: <Widget>[
                        new Icon(Icons.share),
                        new Text('Share'),
                      ],
                    ),
                  ),
                ],
              ),
            )
          ],
        ),
      ),
    );
  }

Answer 1

您好，欢迎来到 Flutter :)

首先，您使用了太多的填充，即 15.0，这就是为什么您的灰色框比 Reddit 示例中的小。

我采用了一种更简单的方法，为您设计了一个示例控件。希望你喜欢。

import 'package:flutter/material.dart';

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

class RedditButtonsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Reddit Buttons Example",
      home: HomePage(),
      theme: ThemeData(
        primaryColor: Colors.white,
        accentColor: Colors.white,
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Reddit Buttons Example'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(child: Icon(Icons.insert_emoticon)),
          RedditButtonsCard(), //Example widget.
        ],
      ),
    );
  }
}

//This is the example control that you need.
class RedditButtonsCard extends StatelessWidget {
  const RedditButtonsCard({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Card(
      color: Colors.black,
      child: Padding(
        padding: const EdgeInsets.all(2.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            FlatButton.icon(
              textColor: Colors.white,
              icon: Icon(
                Icons.thumbs_up_down,
                color: Colors.white,
              ),
              label: Text('Vote'),
              onPressed: () {},
            ),
            FlatButton.icon(
              color: Colors.white30,
              textColor: Colors.white,
              icon: Icon(
                Icons.mode_comment,
                color: Colors.white,
              ),
              label: Text('Comment'),
              onPressed: () {},
            ),
            FlatButton.icon(
              textColor: Colors.white,
              icon: Icon(
                Icons.share,
                color: Colors.white,
              ),
              label: Text('Share'),
              onPressed: () {},
            ),
          ],
        ),
      ),
    );
  }
}

Answer 2

我使用了 Table 和 TableRow，找到了我想要的。跑题了，但我想说这个；我在梦中找到了这个解决方案。我说我自己“你必须使用 DataTable 或其他东西，然后你就得到了你想要的东西。”我猜我的潜意识里充满了 Flutter。 :D

  @override
  Widget build(BuildContext context) {
    return new SafeArea(
      top: false,
      bottom: false,
      child: new Card(
        child: new Column(
          children: <Widget>[
            new Table(
              children: [
                new TableRow(
                  children: [
                    new InkWell(
                      onTap: () {},
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            new Icon(FontAwesomeIcons.arrowAltCircleUp, color: Colors.white),
                            Padding(
                              padding: const EdgeInsets.only(left: 8.0, right: 8.0),
                              child: new Text('Vote', style: TextStyle(color: Colors.white)),
                            ),
                            new Icon(FontAwesomeIcons.arrowAltCircleDown, color: Colors.white),
                          ],
                        ),
                      ),
                    ),
                    new InkWell(
                      onTap: () {},
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            new Icon(Icons.mode_comment, color: Colors.white),
                            Padding(
                              padding: const EdgeInsets.only(left: 8.0),
                              child: new Text('Comment', style: TextStyle(color: Colors.white)),
                            ),
                          ],
                        ),
                      ),
                    ),
                    new InkWell(
                      onTap: () {},
                      child: Padding(
                        padding: const EdgeInsets.fromLTRB(5.0, 15.0, 5.0, 15.0),
                        child: new Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            new Icon(Icons.share, color: Colors.white),
                            Padding(
                              padding: const EdgeInsets.only(left: 8.0),
                              child: new Text('Share', style: TextStyle(color: Colors.white)),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }