实现一个顶部中部底部的控件布局

实现一个顶部中部底部的控件布局，可以使用 Scaffold、AppBar、BottomNavigationBar、Container 和其他布局组件。

下面是一个简单的示例：

import 'package:flutter/material.dart';

class MyPage extends StatefulWidget {
  @override
  _MyPageState createState() => _MyPageState();
}

class _MyPageState extends State<MyPage> {
  int _selectedIndex = 0;
  final List<Widget> _pages = [
    PageOne(),
    PageTwo(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('My App'),
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: (index) {
          setState(() {
            _selectedIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class PageOne extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Page One'),
      ),
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text('Page Two'),
      ),
    );
  }
}

在这个示例中，我们使用了 Scaffold 组件作为页面的根组件，其中包含了一个 AppBar、一个 body 和一个 BottomNavigationBar。AppBar 和 BottomNavigationBar 组件分别作为顶部和底部组件，而 body 则作为中部组件。我们还定义了两个页面组件 PageOne 和 PageTwo，分别用于展示在不同的页面中。

通过设置 BottomNavigationBar 的 currentIndex 和 onTap 属性，我们可以实现切换页面的功能。

这样，我们就实现了一个简单的顶部中部底部的控件布局。