Question

现在我有一个包含三个元素的卡片组件：

频道个人资料图片
频道标题
显示频道订阅状态的按钮

现在我使用行组件来显示三个组件，这是我的完整代码：

return Card(
      key: Key(counter.value.id.toString()),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Container(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  CircleAvatar(
                    radius: 20,
                    backgroundColor: Theme
                        .of(context)
                        .primaryColor,
                    backgroundImage: backgroundImage,
                    foregroundImage:foregroundImage,
                  ),
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 8),
                      child: Text(
                          counter.value.subName,
                          softWrap: true,
                          textAlign: TextAlign.left,
                          style: TextStyle(
                            fontSize: 16,
                            fontWeight: FontWeight.w600,
                          )),
                    ),
                  ),
                  if (isFav.value == 1)
                    Padding(
                      padding:
                      const EdgeInsets.only(top: 8, bottom: 8.0, left: 10),
                      child: ButtonTheme(
                          minWidth: 50,
                          height: 30.0,
                          child: RaisedButton.icon(
                            color: Theme
                                .of(context)
                                .primaryColor,
                            icon: Icon(
                              Feather.check_circle,
                              size: 16,
                            ),
                            onPressed: () =>
                                touchSub(
                                    counter.value.id.toString(), SubStatus.UNSUB),
                            label: Text("已订阅"),
                          )),
                    ),
                  if (isFav.value != 1)
                    Padding(
                      padding:
                      const EdgeInsets.only(top: 8, bottom: 8.0, right: 1),
                      child: ButtonTheme(
                          minWidth: 50,
                          height: 30.0,
                          child: RaisedButton(
                            color: Theme
                                .of(context)
                                .primaryColor,
                            shape: new RoundedRectangleBorder(
                                borderRadius: new BorderRadius.circular(5.0)),
                            onPressed: () =>
                                touchSub(
                                    counter.value.id.toString(), SubStatus.SUB),
                            child: Text("订阅"),
                          )),
                    )
                ],
              ),
              Row(
                children: [
                  Flexible(
                    child: Text(counter.value.intro,
                        softWrap: true,
                        style: TextStyle(
                          fontSize: 15,
                        )),
                  ),
                ],
              )
            ],
          ),
        ),
      ),
    );

一切正常，但有一个问题，我希望频道标题左对齐可能看起来更好，但现在它对齐卡的中心。我尝试在文本组件中添加一个对齐方式，如下所示：

child: Text(
      counter.value.subName,
      softWrap: true,
      textAlign: TextAlign.left,
      style: TextStyle(
        fontSize: 16,
        fontWeight: FontWeight.w600,
      )),

实际上没有任何区别。所以我试图将 MainAxisAlignment 调整为 MainAxisAlignment.start，但一个新问题是组件从左到右显示，我希望订阅按钮位于正确的位置。现在我真的不知道我应该怎么做才能达到我的预期。那么我该怎么做：

左侧的个人资料图片，右侧的订阅按钮和左侧的标题，但在个人资料图片的右侧？这是现在的状态：

标题居中，但我想要左边的标题并跟随个人资料图片。

Answer 1

我在 flex 组件中添加了一个 sizebox 并扩展了中心组件的大小：

SizedBox(
    width: screenWidth * 0.45,
    child: Flexible(
      child: Padding(
        padding: const EdgeInsets.only(left: 8),
        child: Text(counter.value.subName,
            softWrap: true,
            textAlign: TextAlign.left,
            style: TextStyle(
              fontSize: 16,
              fontWeight: FontWeight.w600,
            )),
      ),
    ),
  ),

它有效，看起来像这样：

是否可以使 MainAxisAlignment.spaceAround 组件的一部分在 flutter

1 个答案: