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

Question

我想让我的卡片按钮像 Reddit 应用程序一样组合在一起。怎么做到的？

在主行外有一个容器，容器的填充高度为 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: () {},
            ),
          ],
        ),
      ),
    );
  }
}