如何减少页面中列表的空间？答案

【问题标题】：How to decrease space of List in Page?如何减少页面中列表的空间？
【发布时间】：2021-11-15 05:02:26
【问题描述】：

我正在尝试将行格式的列表插入应用程序的初始页面，但它的 UI 显示之间的间距太大。实际上，我从 youtube 教程中得到了 UI，并试图实现它的元素。如何相应地调整我的代码以减少间距，如下所示？

代码：

class Firstpage extends StatefulWidget {
  @override
  _FirstpageState createState() => _FirstpageState();
}

class _FirstpageState extends State<Firstpage> {
  int currentPage = 0;

  List<Map<String, String>> splashData = [
    {
      "text": "Welcome to Tokoto, Let’s shop!",
    },
    {
      "text":
      "We help people conect with store \naround United State of America",
    },
    {
      "text": "We show the easy way to shop. \nJust stay at home with us",
    },
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: SafeArea(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: <Widget>[
                SizedBox(height: 80),
                Container(
                  width: 340,
                  height: 250,
                  child:
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill),
                ),
                Center(
                  child: Text("App", style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
                SizedBox(height: 10),
                Expanded(
                  child: PageView.builder(
                    onPageChanged: (value) {
                      setState(() {
                        currentPage = value;
                      });
                    },
                    itemCount: splashData.length,
                    itemBuilder: (context, index) => intro(
                      text: splashData[index]['text'],
                    ),
                  ),
                ),
                Expanded(
                  child: Column(
                      children: <Widget>[
                        Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: List.generate(
                            splashData.length,
                                (index) => buildDot(index: index),
                          ),
                        ),
                      ]
                  )
                ),
                DefaultButton(
                  text: "Sign Up",
                  press: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
                  },
                ),
                SizedBox(height: 20),
                DefaultButton(
                  text: "Login",
                  press: () {
                    Navigator.push(context, MaterialPageRoute(builder: (context)=>Signup()));
                  },
                ),
              ],
            )
        )
    );
  }

  AnimatedContainer buildDot({int? index}) {
    return AnimatedContainer(
      duration: Duration(milliseconds: 200),
      margin: EdgeInsets.only(right: 5),
      height: 6,
      width: currentPage == index ? 20 : 6,
      decoration: BoxDecoration(
        color: currentPage == index ? Color(0xFFeb1f48) : Color(0xFFD8D8D8),
        borderRadius: BorderRadius.circular(3),
      ),
    );
  }
}

仅供参考，Class Intro 是：

class intro extends StatelessWidget {
  const intro({
    Key? key,
    this.text,
    this.image,
  }) : super(key: key);
  final String? text, image;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Text(
          text!,
          textAlign: TextAlign.center,
        ),
      ],
    );
  }
}

【问题讨论】：

标签： list flutter user-interface flutter-layout

【解决方案1】：

如果您不使用 SingleChildScrollView 并直接使用 Column 尝试使用 Spacer() 来平衡间距或使用 flex 来调整间距。

Spacer()

或

Spacer(flex: 1),

样本

Column(
      children:[
              Spacer(),
         Container(
                  width: 340,
                  height: 250,
                  child:
                  new Image.asset('assets/images/trip.png', fit: BoxFit.fill),
                ),
                Center(
                  child: Text("App", style: TextStyle(
                    fontSize: 40,
                    fontWeight: FontWeight.w500,
                    color: Color(0xFF9a0e2a)
                  ),),
                ),
         Spacer(),
]),

【讨论】：

【解决方案2】：

您可以通过调整SizedBox() 来缩小间距如果您注意到代码中有 SizedBox() 没有孩子，那是因为您的屏幕上有太多空间。

仅供参考，您可以使用Spacer() 或Expanded() 使空白空间更加灵活或动态地朝向用户的屏幕但请记住，如果：

你有对应Column或Row的主轴方向相同的可滚动的父级（例如你有SingleChildScrollView(child: Column(...))，那么你不能在Column上使用Expanded。因为小部件将有无穷大的主轴尺寸，这将导致无穷大除以flex 数量）TLDR：你不能在无穷大的主轴尺寸上使用Expanded & Spacer
使用Column / Row 时要小心“最大主轴尺寸”（实际上，Row 和Column 不要将最大主尺寸传递给他们的孩子，这就是为什么你会有@987654339 @ 在不使用SizedBox 或Expanded 或Container 等的情况下尝试在Row 内写入非常长的Text 时出现@异常）

【讨论】：