flutter - 在 Flutter 中对齐行内的列

Question

我正在尝试对齐一行内的列，但没有成功。我正在尝试创建这样的布局：

但是通过这种布局，我可以弄清楚如何换行以避免溢出。这是此布局的代码。

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: new EdgeInsets.only(bottom: 1.0),
      width: largura,
      child: new Card(
        child: new InkWell(
          onTap: () => onPress(indice),
          child: new Container(
            width: largura,
            padding: new EdgeInsets.all(5.0),
            child: Flexible(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(children: <Widget>[
                    Row(children: <Widget>[
                      Icon(Icons.play_arrow),
                      SizedBox(width: 5),
                      Text(titulo, maxLines: 3, overflow: TextOverflow.ellipsis)
                    ]),
                  ]),
                  Column(children: <Widget>[
                    Icon(Icons.access_time),
                    Text(duracao)
                  ]),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

我曾尝试在各个地方使用灵活，但没有成功。

我最接近的是：

这是代码：

Widget build(BuildContext context) {
    return Container(
      padding: new EdgeInsets.only(bottom: 1.0),
      width: largura,
      child: new Card(
        elevation: 5,
        child: new InkWell(
          onTap: () => onPress(indice),
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Column(
                children: [
                  SizedBox(height: 20),
                  Icon(Icons.play_arrow, color: Colors.green[500]),
                  SizedBox(height: 20),
                ],
              ),
              Flexible(
                child: Column(
                  children: [
                    Text(titulo, maxLines: 3, overflow: TextOverflow.ellipsis)
                  ],
                ),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    Icon(Icons.access_time),
                    Text(duracao),
                    SizedBox(height: 10),
                  ],
                ),
              ),
            ],
          ),

        ),
      ),
    );
  }
}

这几乎是正确的。因为当它们太长时它会换行，但现在我无法将 TIME 图标和文本向右对齐。

如果有人可以帮助我，我将不胜感激。谢谢。

编辑

我应该说这个布局是另一个代码的一部分：

AlignPositioned(
  alignment: Alignment.topCenter,
  dy: MediaQuery.of(context).size.height * 0.21,
  minChildWidth: MediaQuery.of(context).size.width,
  maxChildWidth: MediaQuery.of(context).size.width,
  maxChildHeight: MediaQuery.of(context).size.height * 0.58,
  minChildHeight: MediaQuery.of(context).size.height * 0.58,
  childHeight: MediaQuery.of(context).size.height * 0.58,
  child: Container(
   padding: EdgeInsets.all(12),
   child: Align(
     alignment: Alignment.topCenter,
     child: FutureBuilder(
         future: getTarefas(),
         builder: (context, snapshot) {
           if (tarefa != null && tarefa.tarefas.length > 0) {
             return  ListView.builder(
                 shrinkWrap: true,
                 controller: ScrollController(),
                 itemCount: tarefa.tarefas.length,
                 itemBuilder: (context, index) {
                   return tarefa.tarefas[index].data_inicio ==
                           dataselecionada
                       ? TarefaCard(
                           largura: MediaQuery.of(context).size.width * 0.8,
                           titulo: tarefa.tarefas[index].nome,
                           duracao: tarefa.tarefas[index].duracao_str,
                           icon: Icon(icons[0]),
                           indice: index,
                           onPress: _setTarefaAtiva)
                       : Container();
                 },
               );
           } else {
             return Center(
               child: CircularProgressIndicator(),
             );
           }
        }),
   ))),

TarefaCard是创建我遇到问题的布局的方法。

谢谢。

标签： flutter

Answer 1

试试这个：

@override
  Widget build(BuildContext context) {
    return Container(
      height: 75,
      padding: new EdgeInsets.all(5.0),
      width: double.infinity,
      child: new Card(
        child: new InkWell(
          onTap: () {},
          child: new Container(
            width: double.infinity,
            padding: new EdgeInsets.all(5.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(
                  Icons.play_arrow,
                  color: Colors.green,
                  size: 25,
                ),
                SizedBox(width: 10),
                Expanded(
                  child: SingleChildScrollView(
                    child: Container(
                      child: Text(
                        content,
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.access_time,
                        color: Colors.green,
                        size: 25,
                      ),
                      Text("12:12"),
                    ]),
              ],
            ),
          ),
        ),
      ),
    );
  }

输出：