构建布局 Flutter - 列和容器

Posted 2023-02-23

【中文标题】构建布局 Flutter - 列和容器

【英文标题】：Building Layouts Flutter - Columns and Container

【发布时间】：2019-01-01 01:37:10

【问题描述】：

上帝的日子，

我在 Flutter 中的布局有问题，有人可以帮忙吗？

编辑：

我会尽量解释得更好。

我有这个屏幕：

使用此代码：

return new Container(
      height: height,
      padding: new EdgeInsets.all(10.0),
      child: new Card(
          elevation: 10.0,
          child:
          new Column(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
                new ListTile(
                  trailing:
                  _buildCounterButton(),
                  title: new Center(child: new Text('VENDAS POR PRODUTOS', style: new TextStyle(fontWeight: FontWeight.bold))),
                  subtitle: new Center(child: new Padding(padding: new EdgeInsets.only(top: 5.0), child:
                  new Text('Top 3 produtos dos últimos 30 dias', textAlign: TextAlign.center,))),
                ),


                        new FutureBuilder<List<RelatorioProdutos>>(
                          future: fetchRelatorioPorProduto(new http.Client(),'$dateInicial', '$dateFinal'),
                          builder: (context, snapshot) 
                            if (snapshot.hasError) print(snapshot.error);
                            else
                              auxTelaDetalhada = RelatorioVendasTotalizadasProdutos(prods: snapshot.data, aondeVoltar: 0,);

                            return snapshot.hasData
                                ? new porProdutoList(listas: snapshot.data)
                                : new Center(child: new RefreshProgressIndicator());

                          ,
                        ),

                new Expanded(
                    child: new Align(
                        alignment: Alignment.bottomCenter,
                        child: new Padding(padding: new EdgeInsets.only(bottom: 10.0),
                        child: new RaisedButton(
                            child: new Text("Relatório Completo",
                              style: new TextStyle(color: Colors.white, fontSize: 20.0),),
                            color: Colors.blue,
                            elevation: 8.0,
                            splashColor: Colors.lightBlue,
                            onPressed: () 
                              Navigator.pushReplacement(
                                context,
                                new MaterialPageRoute(
                                    builder: (context) => auxTelaDetalhada),
                              );
                            
                        ),))),
            ],)        
      ),
    );

我想在进程结束时显示此屏幕。

但是我有这个方法：

new FutureBuilder<List<RelatorioProdutos>>(
                          future: fetchRelatorioPorProduto(new http.Client(),'$dateInicial', '$dateFinal'),
                          builder: (context, snapshot) 
                            if (snapshot.hasError) print(snapshot.error);
                            else
                              auxTelaDetalhada = RelatorioVendasTotalizadasProdutos(prods: snapshot.data, aondeVoltar: 0,);

                            return snapshot.hasData
                                ? new porProdutoList(listas: snapshot.data)
                                : new Center(child: new RefreshProgressIndicator());

                          ,
                        ),

这个方法加载一个json请求，我需要按钮只出现在json请求的末尾。

所以我想把这个 RaisedButton 放在另一个方法返回中，这个按钮只出现在 json 请求的末尾。但是，当我把它放在其他方法中时，我无法对齐这个按钮。

其他方法：

Widget test =

        new Column(
        children: <Widget>[
            listaTiles[0],
            listaTiles[1],
            listaTiles[2]]);



      return test;

我想这样做：

 Widget test =

      new Column(children: <Widget>[
        new Column(
            children: <Widget>[
              listaTiles[0],
              listaTiles[1],
              listaTiles[2]]),
        new Align(
                alignment: Alignment.bottomCenter,
                child: new Padding(padding: new EdgeInsets.only(bottom: 10.0),
                  child: new RaisedButton(
                      child: new Text("Relatório Completo",
                        style: new TextStyle(color: Colors.white, fontSize: 20.0),),
                      color: Colors.blue,
                      elevation: 8.0,
                      splashColor: Colors.lightBlue,
                      onPressed: () 
                        Navigator.pushReplacement(
                          context,
                          new MaterialPageRoute(
                              builder: (context) => auxTelaDetalhada),
                        );
                      
                  ),)),
      ],);

但我明白了：

有人知道如何让它工作吗？

【参考方案1】：

试试这个... 这个问题在这里回答Flutter: Trying to bottom-center an item in a Column, but it keeps left-aligning

return new Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      mainAxisSize: MainAxisSize.max,
      mainAxisAlignment: MainAxisAlignment.end,
      children: <Widget>[
          //your elements here
      ],
    );

【参考方案2】：

虽然我应该把它写在 cmets 但它需要 50 声望 但无论如何..

这将对您有所帮助，如果您想将其居中，则将列包装在中心小部件中

Center(
            child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisAlignment: MainAxisAlignment.end,
                    children: <Widget>[
                    Container(Text("Hello to all", style: TextStyle(fontSize: 60.0)))
                    ],
                  ),
          ),

这将产生以下结果。希望这就是你要找的:)