Flutter：如何使容器固定在顶部包含自定义选项卡

Question

我在 flutter 应用程序中有一个没有应用栏的页面，我通过容器创建了自定义选项卡，当我单击选项卡时，未来的构建器数据会按提供商更改，我想将此选项卡固定在顶部。

主页：

Widget build(BuildContext context) {
    var size = MediaQuery.of(context).size;
    var width = size.width;
    return Consumer<GeneralProvider>(
      builder: (context, generalProvider, child) {
        var tabIndex = generalProvider.gamesIndex;
        return Container(
            color: Colors.black,
            child: ListView(
              children: [
                Container(
                  margin: EdgeInsets.only(top: 10),
                  child: Column(
                    children: [
                      Center(
                          child: Text(
                        'Select Week',
                        style: TextStyle(
                            color: Colors.orange,
                            fontSize: 18,
                            fontWeight: FontWeight.bold),
                      )),
                      topBarTabsMethod(generalProvider, size, tabIndex),
                    ],
                  ),
                ),
                subPageMethod(generalProvider, width)
              ],
            ));
      },
    );
  }

topBarTabs方法：

//-------------Tabs Method ------------------------------------
  Container topBarTabsMethod(
      GeneralProvider generalProvider, Size size, tabIndex) {
    return Container(
      margin: EdgeInsets.only(top: 10),
      padding: EdgeInsets.only(top: 5, bottom: 5),
      color: Colors.black,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        children: [
          topSingleTabMethod(
              generalProvider, tabIndex, size, 1, 'Previous Week'),
          topSingleTabMethod(generalProvider, tabIndex, size, 2, 'This Week'),
          topSingleTabMethod(generalProvider, tabIndex, size, 3, 'Next Week'),
        ],
      ),
    );
  }

//--------------Singel Tab Metho
  InkWell topSingleTabMethod(
      GeneralProvider generalProvider, tabIndex, Size size, x, title) {
    return InkWell(
      onTap: () {
        generalProvider.changeGameIndex(x);
      },
      child: Container(
          color: Colors.black,
          margin: EdgeInsets.only(top: 7, bottom: 7),
          width: size.width / 3.3,
          child: Center(
            child: Text(
              '$title',
              style: TextStyle(
                  fontSize: 18,
                  color: tabIndex == x ? Colors.yellow : Colors.white),
            ),
          )),
    );
  }

包含未来构建器的子页面方法：

//------------------- Sub Page Method ----------------------
  FutureBuilder<dynamic> subPageMethod(
      GeneralProvider generalProvider, double width) {
    return FutureBuilder(
        future: GamesApi().getWeekGames(generalProvider.type),  // type changes by provider
        builder: (context, snapshot) {
          if (snapshot.hasData) {
            var list = snapshot.data;
            return ListView.builder(
                physics: ScrollPhysics(),

供应商：

int gamesIndex = 2;
String type = "this";
void changeGameIndex(newIndex) {
    switch (newIndex) {
      case 1:
        type = "result";
        break;
      case 2:
        type = "this";
        break;
      case 3:
        type = "next";
        break;
    }
    gamesIndex = newIndex;
    notifyListeners();
  }

现在如何在不使用应用栏的情况下固定包含标题和标签的列？

Answer 1

您有容器 -> ListView -> 容器 -> 列 -> topBarTabsMethod

你应该把它改成容器 -> 列 -> topBarTabsMethod -> SingleChildScrollView -> 列 -> 正文的其余部分。

换句话说，将您的 topBarTabsMethod 放在顶部，然后是 SingleChildScrollView，它将 Column 作为您放置其余页面小部件的子项。

Flutter：如何使容器固定在顶部包含自定义选项卡

Flutter :How make container fixed at top contains custom tab

flutter

sticky

tabbar