Flutter，当屏幕大于导航栏宽度时如何使可滚动底部导航栏居中

Question

我正在尝试制作一个带有按钮的底部导航栏，以从待办事项列表应用程序中过滤掉不同的语言。我有一个不可滚动的按钮，可以（取消）选择所有按钮和一个带有按钮的列表视图。 当应用程序很小（手机）时，它可以很好地滚动，但在更大的屏幕（计算机）上它不会居中。 我希望第一个按钮不可滚动，其余按钮如果不适合屏幕，则必须可滚动，否则必须居中

代码：

bottomNavigationBar: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          ElevatedButton(
            onPressed: null,
            child: Icon(Icons.cancel_outlined),
          ),
          Expanded(
            child: SizedBox(
              height: 30,
              child: ListView(
                scrollDirection: Axis.horizontal,
                children: [
                  ElevatedButton(
                    onPressed: () => setState(() {
                      filterLanguage[1];
                    }),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.grey),
                    child: const Text("Real Life"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.lightBlue),
                    child: const Text("Python"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.orange),
                    child: const Text("HTML"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
                    child: const Text("Java"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.blue[600]),
                    child: const Text("Flutter"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.purple),
                    child: const Text("C++"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.teal),
                    child: const Text("Arduino"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.green[900]),
                    child: const Text("Kotlin"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.green),
                    child: const Text("My Website"),
                  ),
                  ElevatedButton(
                    onPressed: () => setState(() {}),
                    style: ElevatedButton.styleFrom(backgroundColor: Colors.black),
                    child: const Text(
                      "Other",
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ],
              ),
            ),
          )
        ],
      ),

我尝试过 mainAxisAlignment 但它什么也没做。

我不知道它是否与listView的宽度有关，如果是的话我怎样才能限制元素的宽度

我是 Flutter 新手，所以对我要轻松一些 😁

Answer 1

您可以使用 PageView 来实现：

PageView(children: [TextButton(onPressed: null, child: Text("button"))],padEnds: false,),