容器未在颤动中居中答案

【问题标题】：Container not centered in flutter容器未在颤动中居中
【发布时间】：2022-08-18 19:59:10
【问题描述】：

不知何故，我的容器没有居中。我尝试了不同的居中方式：我在这个代码示例中使用了container，然后添加alignment:。我还尝试将container 更改为center。还可以将孔column 包裹在center 中。到目前为止，它并没有按照我想要的方式工作。 Listview 的前 2 行未正确居中。底部 2 行正确居中。提前致谢

这是我的应用程序的样子：

颤振代码：

  Widget build(BuildContext context) {

    return Scaffold(
      backgroundColor: Colors.black,
      appBar: AppBar(title: const Text(\'Menu\'),
          backgroundColor:Colors.deepOrange
      ),
      body: machineList == null || machineList.isEmpty
          ? const Center(
           child: CircularProgressIndicator(),
         )
        : SingleChildScrollView(
          child: Column(
          mainAxisAlignment: MainAxisAlignment.start,
          children: <Widget> [
            Column(
                children: <Widget>[
                  ListView.builder(
                      shrinkWrap: true,
                      itemCount: machineList == null ? 0  : machineList.length,
                      itemBuilder: (BuildContext context, int index) {
                      return InkWell(
                        onTap: () {
                          Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => Machinepage(widget.klant)),
                          );
                        },
                        child: Container(
                          alignment: Alignment.center,
                          child: ListTile(
                            leading: const Icon(Icons.person_add, size: 50,color: Colors.white,),
                            title: Text(machineList[index].serienummer.toString(), style: const TextStyle(color:Colors.white,fontSize:20),),
                          ),
                        ),
                      );
                    }, //itemBuilder
                  ),
                ]
            ),
            Row(
              children: <Widget> [
                Expanded(
                  flex: 5,
                  child: Container(
                      margin: const EdgeInsets.only(left: 40.0, right: 10.0, top:15.0, bottom: 12.0),
                      child: const Align(
                        alignment: Alignment.center,
                        child: Icon(Icons.filter_1_rounded, size: 50,color: Colors.white,),
                      )
                  ),
                ),
                Expanded(

                  flex: 8,
                  child: Container(
                    margin: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 4.0),
                    child: Text(machineList[0].serienummer.toString(),style: TextStyle(color:Colors.white,fontSize:20),),
                  ),
                )
              ],
            ),
            Row(), // this is the same row as the row above
          ]
          )
      ),
      drawer: Drawer();
  }
}

我不确定您所说的未居中是什么意思。你希望它看起来如何？
你能包括一个你喜欢把那些放在哪里吗
我希望带有 person+ 图标的前 2 行与带有 [1] 和 [2] 的 2 行相同
然后用同样的方法制作它们？顶部是 ListTiles，底部是 Rows
@Ivo 在我的脑海中，这似乎不合逻辑。但到目前为止它似乎工作。

标签： flutter dart flutter-layout

【解决方案1】：

首先，flex 控制行上的宽度，虽然它具有不同的 flex，但它占据了它的一部分。并使用textAlign 对齐文本。要拥有相同的视图，请将 ListTile 替换为 row 并遵循相同的小部件结构

你能行的

itemBuilder: (BuildContext context, int index) {
  return InkWell(
    onTap: () {},
    child: Container(
        alignment: Alignment.center,
        child: Row(
          children: [
            Expanded(
              flex: 5,
              child: Icon(
                Icons.person_add,
                size: 50,
                color: Colors.white,
              ),
            ),
            Expanded(
              flex: 8,
              child: Text(
                machineList[index],
                style: const TextStyle(
                    color: Colors.white, fontSize: 20),
              ),
            ),
          ],
        )),
  );
},

class GART extends StatefulWidget {
  GART({Key? key}) : super(key: key);

  @override
  State<GART> createState() => _GARTState();
}

class _GARTState extends State<GART> {
  var machineList = ["A", "B"];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.green,
      body: Column(
        mainAxisAlignment: MainAxisAlignment.start,
        children: <Widget>[
          Column(
            children: <Widget>[
              ListView.builder(
                shrinkWrap: true,
                itemCount: machineList == null ? 0 : machineList.length,
                itemBuilder: (BuildContext context, int index) {
                  return InkWell(
                    onTap: () {},
                    child: Container(
                        alignment: Alignment.center,
                        child: Row(
                          children: [
                            Expanded(
                              flex: 5,
                              child: Icon(
                                Icons.person_add,
                                size: 50,
                                color: Colors.white,
                              ),
                            ),
                            Expanded(
                              flex: 8,
                              child: Text(
                                machineList[index],
                                style: const TextStyle(
                                    color: Colors.white, fontSize: 20),
                              ),
                            ),
                          ],
                        )),
                  );
                }, //itemBuilder
              ),
            ],
          ),
          itemBuilder(),
          // Row(), // this is the same row as the row above
        ],
      ),
    );
  }

  Row itemBuilder() {
    return Row(
      children: <Widget>[
        Expanded(
          flex: 5,
          child: Container(
              margin: const EdgeInsets.only(
                  left: 40.0, right: 10.0, top: 15.0, bottom: 12.0),
              child: const Align(
                alignment: Alignment.center,
                child: Icon(
                  Icons.filter_1_rounded,
                  size: 50,
                  color: Colors.white,
                ),
              )),
        ),
        Expanded(
          flex: 8,
          child: Container(
            margin: const EdgeInsets.only(right: 20.0, top: 10.0, bottom: 4.0),
            child: Text(
              machineList[0],
              style: TextStyle(color: Colors.white, fontSize: 20),
            ),
          ),
        )
      ],
    );
  }
}

【讨论】：