是否可以在 Flutter 中创建目录按钮？答案

【问题标题】：is it possible to create a table of contents button in Flutter?是否可以在 Flutter 中创建目录按钮？
【发布时间】：2020-08-17 19:30:11
【问题描述】：

我在 enDrawer 中创建了一个 listTile。我想要的是，例如，如果我按下标题二按钮，页面将自动滚动到标题二时间>。请帮助我大师..

这是我的 ListTile 截图： https://drive.google.com/file/d/1oni6jsQtSgzYMhclHm6QwdozSKtPPglE/view?usp=sharing

这是我的页面截图： https://drive.google.com/file/d/10x--L3NZh5LGGfw-VbpZCWrfNcENR2Kq/view?usp=sharing

我希望当我在 Drawer 中按下 Headline Two 时，页面自动滚动到 Headline Two 就像在这个截图： https://drive.google.com/file/d/1GZlJnWuFmYK9cYxuTlOroiZBTw9oVvMU/view?usp=sharing

这是我的完整代码：

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

class MyStotry extends StatefulWidget {
  @override
  _MyStotryState createState() => _MyStotryState();
}

class _MyStotryState extends State<MyStotry> {
  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF41407C),
        title: Text('The Story of ANU'),
      ),
      endDrawer: Drawer(
        child: Container(
          child: ListView(
            children: <Widget>[
              Container(
                height: 250,
                child: DrawerHeader(
                  decoration: BoxDecoration(color: Color(0xFF41407C)),
                  child: Stack(
                    children: <Widget>[
                      Center(
                        child: Text(
                          'Table of Content',
                          style: TextStyle(
                              color: Color(0xFFF8F8F8), fontSize: 20.0),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              ListTile(onTap: () {}, title: Text('Headline One')),
              ListTile(onTap: () {}, title: Text('Headline Two')),
              ListTile(onTap: () {}, title: Text('Headline Three')),
              ListTile(onTap: () {}, title: Text('Headline Four')),
              ListTile(onTap: () {}, title: Text('Headline Five')),
              ListTile(onTap: () {}, title: Text('Headline Six')),
              ListTile(onTap: () {}, title: Text('Headline Seven')),
              ListTile(onTap: () {}, title: Text('Headline Eight')),
              ListTile(onTap: () {}, title: Text('Headline Nine')),
              ListTile(onTap: () {}, title: Text('Headline Ten')),
              ListTile(onTap: () {}, title: Text('Headline Eleven')),
            ],
          ),
        ),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Headline1(headline1: 'Headline One'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(headline2: 'Headline Two'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Headline2(headline2: 'Headline Three'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(headline2: 'Headline Four'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(headline2: 'Headline Five'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
            ],
          ),
        ),
      ),
    );
  }
}

class Headline1 extends StatelessWidget {
  Headline1({this.headline1});
  final String headline1;
  @override
  Widget build(BuildContext context) {
    return Text(
      headline1,
      style: TextStyle(
        fontWeight: FontWeight.w800,
        fontSize: 22,
        fontFamily: 'Georgia',
        color: Color(0xFF010101),
      ),
      textAlign: TextAlign.center,
    );
  }
}

class Headline2 extends StatelessWidget {
  Headline2({this.headline2});
  final String headline2;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10),
      child: Text(
        headline2,
        style: TextStyle(
          fontFamily: 'Georgia',
          fontWeight: FontWeight.w800,
          fontSize: 18,
          color: Color(0xFF010101),
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

class Content extends StatelessWidget {
  Content({this.content});
  final String content;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 10),
      child: Text(
        content,
        style: TextStyle(
          height: 1.5,
          fontFamily: "Georgia",
          fontSize: 15.0,
          color: Color(0xFF010101),
        ),
        textAlign: TextAlign.justify,
      ),
    );
  }
}

【问题讨论】：

标签： flutter button drawer tableofcontents

【解决方案1】：

您可以在下面复制粘贴运行完整代码
第一步：修改类Headline2并添加Key

 class Headline2 extends StatelessWidget {
  Headline2({Key key, this.headline2}) : super(key: key);

第 2 步：使用 List<GlobalKey> 和 ScrollController

 List<GlobalKey> headLineKeyList = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey()
  ];
  ScrollController _scrollController = ScrollController();

第 3 步：将ScrollController 放入SingleChildScrollView

SingleChildScrollView(
        controller: _scrollController,

第四步：Headline通过key: headLineKeyList[0]

 Headline1(key: headLineKeyList[0], headline1: 'Headline One'),

第5步：ListTile的onTap调用Scrollable.ensureVisible(headLineKeyList[0].currentContext

 ListTile(
      onTap: () {
        Scrollable.ensureVisible(headLineKeyList[0].currentContext,
            duration: const Duration(milliseconds: 500));
      },

工作演示

完整代码

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyStotry(),
    );
  }
}

class MyStotry extends StatefulWidget {
  @override
  _MyStotryState createState() => _MyStotryState();
}

class _MyStotryState extends State<MyStotry> {
  List<GlobalKey> headLineKeyList = [
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey(),
    GlobalKey()
  ];
  ScrollController _scrollController = ScrollController();

  @override
  Widget build(BuildContext context) {
    SystemChrome.setEnabledSystemUIOverlays([]);
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xFF41407C),
        title: Text('The Story of ANU'),
      ),
      endDrawer: Drawer(
        child: Container(
          child: ListView(
            children: <Widget>[
              Container(
                height: 250,
                child: DrawerHeader(
                  decoration: BoxDecoration(color: Color(0xFF41407C)),
                  child: Stack(
                    children: <Widget>[
                      Center(
                        child: Text(
                          'Table of Content',
                          style: TextStyle(
                              color: Color(0xFFF8F8F8), fontSize: 20.0),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              ListTile(
                  onTap: () {
                    Scrollable.ensureVisible(headLineKeyList[0].currentContext,
                        duration: const Duration(milliseconds: 500));
                  },
                  title: Text('Headline One')),
              ListTile(
                  onTap: () {
                    Scrollable.ensureVisible(headLineKeyList[1].currentContext,
                        duration: const Duration(milliseconds: 500));
                  },
                  title: Text('Headline Two')),
              ListTile(
                  onTap: () {
                    Scrollable.ensureVisible(headLineKeyList[2].currentContext,
                        duration: const Duration(milliseconds: 500));
                  },
                  title: Text('Headline Three')),
              ListTile(
                  onTap: () {
                    Scrollable.ensureVisible(headLineKeyList[3].currentContext,
                        duration: const Duration(milliseconds: 500));
                  },
                  title: Text('Headline Four')),
              ListTile(
                  onTap: () {
                    Scrollable.ensureVisible(headLineKeyList[4].currentContext,
                        duration: const Duration(milliseconds: 500));
                  },
                  title: Text('Headline Five')),
              ListTile(onTap: () {}, title: Text('Headline Six')),
              ListTile(onTap: () {}, title: Text('Headline Seven')),
              ListTile(onTap: () {}, title: Text('Headline Eight')),
              ListTile(onTap: () {}, title: Text('Headline Nine')),
              ListTile(onTap: () {}, title: Text('Headline Ten')),
              ListTile(onTap: () {}, title: Text('Headline Eleven')),
            ],
          ),
        ),
      ),
      body: SingleChildScrollView(
        controller: _scrollController,
        child: Padding(
          padding: EdgeInsets.all(20),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Headline1(key: headLineKeyList[0], headline1: 'Headline One'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(key: headLineKeyList[1], headline2: 'Headline Two'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Headline2(key: headLineKeyList[2], headline2: 'Headline Three'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(key: headLineKeyList[3], headline2: 'Headline Four'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
              Headline2(key: headLineKeyList[4], headline2: 'Headline Five'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'),
              Content(
                  content:
                      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. '),
            ],
          ),
        ),
      ),
    );
  }
}

class Headline1 extends StatelessWidget {
  Headline1({Key key, this.headline1}) : super(key: key);
  final String headline1;
  @override
  Widget build(BuildContext context) {
    return Text(
      headline1,
      style: TextStyle(
        fontWeight: FontWeight.w800,
        fontSize: 22,
        fontFamily: 'Georgia',
        color: Color(0xFF010101),
      ),
      textAlign: TextAlign.center,
    );
  }
}

class Headline2 extends StatelessWidget {
  Headline2({Key key, this.headline2}) : super(key: key);
  final String headline2;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(top: 10, bottom: 10),
      child: Text(
        headline2,
        style: TextStyle(
          fontFamily: 'Georgia',
          fontWeight: FontWeight.w800,
          fontSize: 18,
          color: Color(0xFF010101),
        ),
        textAlign: TextAlign.center,
      ),
    );
  }
}

class Content extends StatelessWidget {
  Content({this.content});
  final String content;
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.only(bottom: 10),
      child: Text(
        content,
        style: TextStyle(
          height: 1.5,
          fontFamily: "Georgia",
          fontSize: 15.0,
          color: Color(0xFF010101),
        ),
        textAlign: TextAlign.justify,
      ),
    );
  }
}

【讨论】：

@chunhunghan 谢谢你的回答，对不起，谢谢你，因为我刚刚学会了如何使用 Stackoverflow。祝你有美好的一天