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

Question

我想实现这样的用户界面。Title、SubTitle 和 BottomText 都整齐地对齐。

到目前为止，我自己得到的是这个，它是一张包含所有小部件的卡片。如何使 Subtitle 和 BottomText 与 Title 对齐？

这是我的代码：

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

标签： android-studioandroid-layoutflutteruser-interfacedart

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

您的结果将如下所示：