如何使屏幕呈现为 indexedStacked 子项可滚动

Posted 2023-05-07

【中文标题】如何使屏幕呈现为 indexedStacked 子项可滚动

【英文标题】：How to make screen rendered as indexedStacked children scrollable

【发布时间】：2021-08-20 01:35:45

【问题描述】：

我正在构建一个颤振应用程序

我构建了一个无状态小部件，它只返回一个顶部带有 appbar 的脚手架

和一个作为主体的 Colum。该列的第一个孩子是三个类别的列表视图构建器

所以 ontap 我要切换到所需的每个类别的屏幕

我也希望能够在每个屏幕之间左右滑动

<pre>
class Messengernavscreen extends StatelessWidget 
  final _controller = PageController();

  final List<Widget> _screens = [
    Messagescreen(),
    Onlinescreen(),
    Groupsscreen(),
    // Requestscreen()
  ];

  final List<String> categories = [
    'Messages',
    'Online',
    'Groups'
    /*'Request'*/
  ];

  @override
  Widget build(BuildContext context) 
    final width = MediaQuery.of(context).size.width;
    final height = MediaQuery.of(context).size.height;

    PageController(); // here i did as you said but the parameter controller and children does not exist inside pageController

    return Scaffold(
      backgroundColor: Palette.onsPrimCol,
      appBar: AppBar(
        backgroundColor: Palette.onsPrimCol,
        elevation: 0.0,
        title: Text(
          'Chats',
          style: const TextStyle(
            fontSize: 28.0,
            fontWeight: FontWeight.bold,
          ),
        ),
        actions: [
          Circlebutton(
            //iconSurroundedMargin: 6.0,
            // iconSurroundedPadding: 6.0,
            bgColor: Colors.grey[200],
            icon: Icons.search,
            press: () ,
            iconsize: 30.0,
          ),
        ],
      ),
      body: Column(
        children: [
          Container(
            alignment: Alignment.center,
            width: width * 0.80,
            height: 45.0,
            color: Palette.onsPrimCol,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: categories.length,
              itemBuilder: (BuildContext context, int index) 
                return Padding(
                  padding: const EdgeInsets.symmetric(
                      vertical: 5.0, horizontal: 10.0),
                  child: Column(
                    children: [
                      Text(
                        categories[index],
                        style: TextStyle(
                            color: Colors.white,
                            fontSize: 22.0,
                            fontWeight: FontWeight.bold,
                            letterSpacing: 1.2),
                      ),
                      const SizedBox(height: 2.0),
                    ],
                  ),
                );
              ,
            ),
          ),
          Expanded(
              child: PageView(
            children: _screens,
          )),
        ],
      ),
    );
  

</pre>

【参考方案1】：

您要查找的小部件是PageView。你给它一个孩子的列表，然后你可以在他们之间滑动：

PageView(
  children: [
    FirstPage(),
    SecondPage(),
    ...
  ],
)

如果您还希望能够使用底部导航按钮设置当前页面，您可以传入 PageController 并使用该按钮设置页面：

final _controller = PageController();  // defined in your state class

// then in build()
PageController(
  controller: _controller,
  children: [ ... ],  // list of pages
)

// then to update the page manually:
void setPage(int page) 
  _controller.animateToPage(
    page,
    duration: Duration(milliseconds: 500),
    curve: Curves.ease,
  );  // note: no need to call setState()

这将让您在页面之间向左/向右滑动。

【讨论】：

感谢@cameron1024，它成功了。将 indexedStaked 更改为 PageView 后，我现在可以左右滚动。但是在我放置“final _controller = PageController();”之后谈论使用底部导航按钮设置页面// 在class里面&我在build里面输入PageController()，你提供的参数好像不存在controller:&children:

其次，我有两个屏幕要修复此问题，一个带有底部导航栏，另一个带有顶部水平对齐的列表视图。我想先用顶部的列表视图构建器修复那个。所以我已经更新了这个问题以包含我的代码，请帮我检查一下，我希望能够左右滚动，还能够单击任何列表视图选项卡并获得所需的屏幕来显示