构建布局 Flutter - 列和容器

问题描述 投票:0回答:2

上帝日,

我在 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请求的末尾。

所以我试图将这个 RaisingButton 放在另一个方法返回中,这样该按钮仅出现在 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),
                        );
                      }
                  ),)),
      ],);

但我明白了:

有人有办法让这个工作吗?

flutter layout containers
2个回答
0
投票

试试这个... 这个问题在这里得到解答Flutter:尝试将列中的项目置于底部居中,但它保持左对齐

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

0
投票

虽然我应该把它写在评论中,但它需要50声誉但无论如何..

这会对您有所帮助,如果您想将其居中,则将该列包裹在中心小部件中

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

这将产生以下结果。希望这就是您正在寻找的:)

© www.soinside.com 2019 - 2024. All rights reserved.