Flutter：将特定的小部件放在中心的一行中

Question

如何在行中央放置“问号”？预期结果是“？”不论左/右的值都在中心。

      body: ListView.builder(
      itemCount: testList.length,
      itemBuilder: (BuildContext context, int index) {
        return Card(
          child: Column(
            children: <Widget>[
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                crossAxisAlignment: CrossAxisAlignment.center,
                children: <Widget>[
                  Container(
                    color: Colors.green,
                    child: Text(testList[index].n1.toString(), style: TextStyle(fontSize: 80,)),
                  ),
                  Container(
                    color: Colors.red,
                    child: Text(testList[index].x, style: TextStyle(fontSize: 80,)),
                  ),
                  Container(
                    color: Colors.green,
                    child: Text(testList[index].n2.toString(), style: TextStyle(fontSize: 80, )),
                  ),
                ],
              ),
              Text('>'),
              Text('<'),
              Text('='), //
            ],
          ),
        );
      }),

Answer 1

您可以使用row和Expand with flex小部件来实现所需的输出。

遵循最少的代码可以为您提供更多帮助。

Card(
      child: Column(
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Expanded(
                flex: 1,
                child: Row(
                  children: [
                    Expanded(child: Container()),
                    Container(
                      color: Colors.green,
                      child: Text('10',
                          style: TextStyle(
                            fontSize: 80,
                          )),
                    ),
                  ],
                ),
              ),
              Container(
                color: Colors.red,
                child: Text("?",
                    style: TextStyle(
                      fontSize: 80,
                    )),
              ),
              Expanded(
                flex: 1,
                child: Row(
                  children: [
                    Container(
                      color: Colors.green,
                      child: Text('100',
                          style: TextStyle(
                            fontSize: 80,
                          )),
                    ),
                    Expanded(child: Container()),
                  ],
                ),
              ),
            ],
          ),
          Text('>'),
          Text('<'),
          Text('='), //
        ],
      ),
    )