android-studio - 在列和行下对齐卡片中的文本

Question

我想实现这样的UI。 Title，SubTitle和BottomText全部对齐。

到目前为止，我一个人得到的是一张包含所有小部件的卡片。如何使字幕和BottomText与标题对齐？

这是我的代码:

return ListView(
  padding: EdgeInsets.all(8.0),
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  children: <Widget>[
    Container(
      child: Card(
        shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(15.0)
        ),
        color: Colors.white,
        elevation: 10,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Padding(
              padding: EdgeInsets.fromLTRB(20.0, 8.0, 8.0, 8.0),
              child: Text('Title', style: TextStyle(fontWeight: FontWeight.bold),),
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                ),
                Column(
                  children: <Widget>[
                    Text('Text2'),
                    Text('Text2'),
                  ],
                )
              ],
            ),
            Container(
              padding: EdgeInsets.all(8.0),
              color: Colors.orange,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text('Text2'),
                  Text('Text2'),
                  Checkbox(value: false,)
                ],
              ),
            )
          ],
        ),
      ),
    )
  ],
);

Answer 1

只需一点改进，您就会实现想要的目标。我希望这段代码会在很大程度上帮助您
最终解决方案

      return ListView(
          padding: EdgeInsets.all(8.0),
          scrollDirection: Axis.vertical,
          shrinkWrap: true,
          children: <Widget>[
            Container(
              child: Card(
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.only(topLeft: Radius.circular(40.0), topRight: Radius.circular(40.0), bottomLeft: Radius.circular(15.0), bottomRight: Radius.circular(15.0))
                ),
                color: Colors.white,
                elevation: 10,
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.fromLTRB(20.0, 30.0, 8.0, 8.0),
                      child: Text(
                        'Title',
                        style: TextStyle(fontWeight: FontWeight.bold),
                      ),
                    ),
                    Container(
                        padding: EdgeInsets.all(20.0),
                        child: Row(
                            mainAxisAlignment: MainAxisAlignment.spaceBetween,
                            children: <Widget>[
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              ),
                              Column(
                                children: <Widget>[
                                  Text('Text2'),
                                  Text('Text2'),
                                ],
                              )
                            ])),
                    Container(
                      padding:
                          EdgeInsets.symmetric(vertical: 8.0, horizontal: 20.0),
                      decoration: BoxDecoration(
                          color: Colors.orange,
                          borderRadius: BorderRadius.circular(15.0)),
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceBetween,
                        children: <Widget>[
                          Text('Text2'),
                          Text('Text2'),
                          Checkbox(
                            value: false,
                          )
                        ],
                      ),
                    )
                  ],
                ),
              ),
            )
          ],
        );

在这里，您的结果将如下所示:

如果您对此有任何疑问，请告诉我。但是，我觉得您会很清楚。如果它对您有帮助，请进行投票并标记此答案，这将有助于将来的人们直接找到标记的解决方案 [此外，我们也为我们的努力赢得了公正] :)快乐学习