flutter：如何控制文本大小、颜色、对齐方式以及在 ListView.builder 输出中添加分隔符？

Question

我不知道如何控制我的应用 ListView.Builder 的文本输出。我想更改文本颜色、对齐方式和大小，最好使用 AutoSizeText 小部件。

当使用 alignment: Alignment.topRight, 代码时，它只会将它移动到顶部、中间和底部，但不会将它移动到列内的右侧。

Flexible(
                flex: 30,
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Visibility(
                      visible: _isVisible,
                      child: Row
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                if (sum > 0) {
                                  setState(() {
                                    _isVisible = false;
                                    _isVisible2 = true;
                                  });
                                }
                                resultS = [];
                                print(
                                    'The sum of ' '$sum' ' with 2 digits');
                                for (int z = 1; z <= 9; z++) {
                                  for (int y = 1; y <= 9; y++) {
                                    if (z + y == sum) {
                                      if (z < y) {
                                        String z2 = "$z";
                                        String y2 = "$y";
                                        setState(() {
                                          print('$z + $y');
                                          resultS.add(('•' '$z2' '+$y2'));
                                        });
                                        continue;
                                      }
                                    }
                                  }
                                }
                                print('$resultS');
                              },
                              child: AspectRatio(
                                aspectRatio: 1,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Container(
                                    //padding: const EdgeInsets.all(10),
                                    color: Colors.deepPurple[500],
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '2',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.white),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                          Expanded(
                            child: GestureDetector(
                              onTap: () {
                                print('Just clicked on 7');
                              },
                              child: AspectRatio(
                                aspectRatio: 1,
                                child: Padding(
                                  padding: const EdgeInsets.all(4),
                                  child: Container(
                                    color: Colors.cyanAccent,
                                    margin: const EdgeInsets.all(1.0),
                                    child: const AutoSizeText(
                                      '8',
                                      textAlign: TextAlign.center,
                                      style: TextStyle(
                                          fontSize: 300.0,
                                          color: Colors.black45),
                                    ),
                                  ),
                                ),
                              ),
                            ),
                          ),
                        ],
                      ),
                    ),
                    Visibility(
                      visible: _isVisible2,
                      child: Container(
                        alignment: Alignment.topRight,
                        decoration:
                            const BoxDecoration(color: Colors.white30),
                        width: double.maxFinite,
                        height: 300.0,
                        child: ListView.builder(
                          scrollDirection: Axis.vertical,
                          shrinkWrap: true,
                          itemCount: resultS.length,
                          itemBuilder: (context, index) {
                            return Text(resultS[index]);
                           
                          },
                        ),
                      ),
                    ),

这是我得到的，（结果 1+4、2+3）我希望文本颜色为白色，字体更大，从右上角开始，数字之间有一个行分隔符。

Answer 1

尝试使用 ListView.separated 而不是 ListView.builder。做这样的事情：

ListView.separated(
  scrollDirection: Axis.vertical,
  shrinkWrap: true,
  itemCount: resultS.length,
  separatorBuilder: (BuildContext context, int index) => Divider(color: Colors.white),
  itemBuilder: (BuildContext context, int index) {
    return Align(
      child: Text(resultS[index], style: TextStyle(color: Colors.white, fontSize: 30),
      alignment: Alignment.topRight
    );
  },
)

您可以根据需要更改 fontSize 和 color 值。