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

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

我正在构建一个 Flutter 应用程序

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

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

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

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

<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,letterSpacing: 1.2),const SizedBox(height: 2.0),);
              },Expanded(
              child: PageView(
            children: _screens,)),);
  }
}
</pre>

解决方法

您要查找的小部件是 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()
}

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