Добавление нового столбца на карточку во Flutter

Как добавить новый столбец в карточку во флаттере?

В настоящее время у меня есть 2 столбца, и я не могу понять, как добавить третий между ними, поскольку они находятся слева и справа. Когда я попытался добавить «новый столбец», он создает новую строку текста только под первым столбцом.

Это мой код до сих пор:

  Widget _buildListItem(BuildContext context, Record record) {
    return Card(
      key: ValueKey(record.activityName),
      elevation: 8.0,
      margin: new EdgeInsets.symmetric(horizontal: 10.0, vertical: 6.0),
      child: Container(
        decoration: BoxDecoration(color: Color.fromRGBO(64, 75, 96, .9)),
        child: ListTile(
          contentPadding:
          EdgeInsets.symmetric(horizontal: 20.0, vertical: 10.0),

           title: Text(
            record.activityName,
            style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold, fontSize: 23),
          ),
          subtitle: Row(
            children: <Widget>[
              new Flexible(
                  child: new Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        RichText(
                          text: TextSpan(
                            text: "Activations: "+record.activations+
                                  "\n"+record.dateCompleted,
                            style: TextStyle(color: Colors.white),
                          ),
                          maxLines: 2,
                          softWrap: true,
                        )
                      ],
                  ) 
                )
            ],
          ),
          trailing: Container(
              child: Hero(
                  tag: "avatar_" + record.activityName,
                  child: CircleAvatar(
                    radius: 32,
                    backgroundImage: NetworkImage(record.icon),
                    backgroundColor: Colors.white,
                  )
              )
          ),
          onTap: () {
            Navigator.push(
                context, MaterialPageRoute(builder: (context) => new DetailPage(record: record)));
          }
        ),
      )
    );
  }

Мне нужны 3 столбца, чтобы я мог добавить изображение в середине этой карты.

Токовый выход Ожидаемый результат

Вместо этого вы должны добавить к детям Row.

— 29.04.2019 06:01

да, вы должны использовать Row вместо виджета ListTile, docs.flutter.io/flutter/widgets/Row-class.html

— 29.04.2019 06:04

Вы можете показать вам скриншот пользовательского интерфейса?

— 29.04.2019 07:09

dart flutter flutter-layout

29.04.2019 05:53

Приложению требуется поддержка Multidex во flutter

5 783

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Судя по вашему скриншоту, вот решение. Вы можете изменить его в соответствии с вашими потребностями.

Widget _buildListItem(BuildContext context) {
  return Card(
    margin: EdgeInsets.all(12),
    elevation: 4,
    color: Color.fromRGBO(64, 75, 96, .9),
    child: Padding(
      padding: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 16),
      child: Row(
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              Text("Jumping", style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold)),
              SizedBox(height: 4),
              Text("Activations 9", style: TextStyle(color: Colors.white70)),
              Text("03-08-19", style: TextStyle(color: Colors.white70)),
            ],
          ),
          Spacer(),
          CircleAvatar(backgroundColor: Colors.white),
        ],
      ),
    ),
  );
}

Выход:

Спасибо! Хотя я изменил свой «текущий» и «ожидаемый» вывод в своем вопросе, это помогло мне создать новый столбец, добавив еще один разделитель перед CircleAvatar. Где бы я добавил вызов onTap?

— 29.04.2019 14:55

Вы можете использовать Text/Image в Expanded перед CircleAvatar в моем решении, вы можете удалить Spacer.

— 29.04.2019 15:12

Я так и сказал :) А как насчет вызова onTap/onClick?

— 30.04.2019 02:31

Если вы хотите разрешить клики по Text/Image, вам нужно обернуть их GestureDetector и использовать onTap().

— 30.04.2019 03:32

29.04.2019 12:33