将文本从滑块移动到新行答案

【问题标题】：Move Text from Slider to New Line将文本从滑块移动到新行
【发布时间】：2022-09-28 11:37:00
【问题描述】：

我想将此“近期交易”移至下一行。出于某种原因，当我实现一个滑块时，我希望“最近的交易”文本移动到下一行，它只是没有，而是与滑块保持在同一行。

我的源代码如下所示：

import \'package:flutter/material.dart\';

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: SizedBox(
      width: double.infinity,
      height: 150,
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          Container(
            margin: const EdgeInsets.all(15),
            width: 250,
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text(
              \'\\$5200.00\',
              style: TextStyle(
                  fontSize: 15,
                  color: Colors.white,
                  fontWeight: FontWeight.bold),
            ),
          ),
          Container(
            margin: const EdgeInsets.all(15),
            width: 250,
            height: 100,
            color: Colors.green,
            alignment: Alignment.center,
            child: const Text(
              \'\\$1200.00\',
              style: TextStyle(
                  fontSize: 15,
                  color: Colors.white,
                  fontWeight: FontWeight.bold),
            ),
          ),
          SizedBox(height: 30),
          Text(\"Recent Transactions\")
        ],
      ),
    )));
  }
}

我对此很陌生，我需要某种形式的指导。请帮忙。

这就是它的样子

https://i.postimg.cc/y8CLqNxX/Screenshot-1664221289.png

标签： flutter

【解决方案1】：

现在，您正在水平 ListView 中添加文本“Recent Transactions”。尝试用 Column 包装 SizedBox，然后添加“Recent Transactions”作为它的子项

import 'package:flutter/material.dart';

class BaseScreen extends StatelessWidget {
  const BaseScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
          child: Column(
        crossAxisAlignment: CrossAxisAlignment.start
        children: [
          SizedBox(
            width: double.infinity,
            height: 150,
            child: ListView(
              scrollDirection: Axis.horizontal,
              children: [
                Container(
                  margin: const EdgeInsets.all(15),
                  width: 250,
                  height: 100,
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: const Text(
                    '\$5200.00',
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                Container(
                  margin: const EdgeInsets.all(15),
                  width: 250,
                  height: 100,
                  color: Colors.green,
                  alignment: Alignment.center,
                  child: const Text(
                    '\$1200.00',
                    style: TextStyle(
                        fontSize: 15,
                        color: Colors.white,
                        fontWeight: FontWeight.bold),
                  ),
                ),
                SizedBox(height: 30),
              ],
            ),
          ),
          Text("Recent Transactions",
           style: TextStyle(fontWeight: FontWeight.bold),
          )
        ],
      ))
    );
  }
}

【讨论】：

@Askay，谢谢，那行得通，如何将其移至左侧并使其变粗，您能否编辑一下。只是最近的交易部分......
添加到上述答案的编辑中。如果您接受答案将不胜感激