Question

我想让我的卡片按钮像Reddit App一样放在一起。那怎么办

在主行的外部有一个Container，并且Container'的填充高度为15.0。 Row的窗口小部件如何快速适应该高度15.0。

这是我的代码；

@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示例的原因。

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

Screenshot of example app

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)),
                            ),
                          ],
                        ),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }

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

2 个答案: