时间戳

首页 > 解决方案 > Flutter：如何更改 SingleChildScrollView 中按钮的位置？

button - Flutter：如何更改 SingleChildScrollView 中按钮的位置？

问题描述

我想要一个带有可变数量按钮的屏幕。这是通过 MaterialButtons 列表实现的。因为我不知道按钮的数量（可能太大而无法在屏幕上显示所有按钮），所以我使用 SingleChildScrollView 使按钮列表可滚动。如果按钮较少，导致屏幕没有完全填满，则按钮应始终显示在屏幕中间。目前，按钮列表总是从我的屏幕顶部开始。

有人知道如何实现这种自动位置调整吗？是否可以更改按钮之间的空间？

这是我的代码（目前有 3 个按钮的固定数量，但很快就会改变）：

class PlanState extends State<PlanForm> {
  var namesList = new List<String>();
  List<MaterialButton> buttonsList = new List<MaterialButton>();

  @override
  void initState() {
    super.initState();
    namesList.add("Button1");
    namesList.add("Button2");
    namesList.add("Button3");

  List<Widget> _buildButtonsWithNames() {
    int length = namesList.length;
    for (int i = 0; i < length; i++) {
      buttonsList
          .add(new MaterialButton(
              height: 40.0,
              minWidth: 300.0,
              color: Colors.blue,
              textColor: Colors.white,
              child: new Text(namesList[0],  textScaleFactor: 2.0,),
              onPressed: () {
                Navigator.push(context, new MaterialPageRoute(builder: (context) => new viewPlanScreen()),);
               }
           ));
      namesList.removeAt(0);
    }
    return buttonsList;
  }

  @override
  Widget build(BuildContext context) {
      return SingleChildScrollView( 
        child:Center(   
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: _buildButtonsWithNames()
            )
         )
      );
  }
}

标签： buttonflutterscrollview

解决方案

因为 SilgheChildScrollView 在主轴方向上具有“无限”大小，所以您不能像在其他情况下那样居中。如果您查看文档 [1]，则有一些示例说明如何在有足够空间的情况下实现此目的，例如居中。我没有尝试过，但应该是这样的：

LayoutBuilder(
    builder: (BuildContext context, BoxConstraints viewportConstraints) {
      return SingleChildScrollView(
        child: ConstrainedBox(
          constraints: BoxConstraints(
            minHeight: viewportConstraints.maxHeight,
          ),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: _buildButtonsWithNames(),
          )
        )
      )
    }
  )

[1] https://api.flutter.dev/flutter/widgets/SingleChildScrollView-class.html

推荐阅读