利用flutter实现类似web端的tab切换

import 'package:flutter/material.dart';
class CPage extends StatefulWidget {
  @override
  _CPageState createState() => _CPageState();
}

class _CPageState extends State<CPage> {
  int inx = 0; // 当前默认选中第几项 默认0
  List tabs = [
    '选项一','选项二','选项三','选项四',
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: Container(
          margin: EdgeInsets.fromLTRB(10, 24, 10, 0),
          child: Column(
            children: <Widget>[
              Container(
                height: 50,
                decoration: BoxDecoration(
                    border:Border(bottom: BorderSide(width: 1,color: Color.fromRGBO(0, 0, 0, 1))
                ),
                ),
                child: Row(
                  children: tabs.asMap().keys.map((index) => Expanded(
                     flex: 1,
                     child: Stack(
                       children: <Widget>[
                         InkWell(
                           child: Center(
                             child: Text(tabs[index])
                           ),
                           onTap: (){ //可以发送ajax 请求对应的列表
                             setState(() {
                               this.inx = index;
                             });
                           },
                         ),
                         inx == index?Align(
                           alignment: Alignment.bottomCenter,
                           child: Container(
                             height: 4,
                             color: Colors.amberAccent,
                           ),
                         ):Text('')
                       ],
                     ),
                  )).toList(),
                ),
              ),
              Container(
                child: ListView(
                  shrinkWrap: true,//这个属性很重要  如果不加则代表当前ListView不允许被作为Column组件的子组件
                  children: <Widget>[ // 请求数据的列表放在这里
                    Text('这是第${inx+1}个tab的列表'),
                    Text('这是第${inx+1}个tab的列表'),
                    Text('这是第${inx+1}个tab的列表')
                  ],
                ),
              )
            ]
          ),
        )
    );
  }
}