是否可以在 Flutter 中创建一个 table 的内容按钮？

Question

我在 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

我想当我在抽屉里按标题二时，页面自动滚动到标题二 就像这个截图： 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,
      ),
    );
  }
}

Answer 1

您可以复制粘贴运行下面的完整代码
第一步：修改classHeadline2，添加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,

第 4 步：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,
      ),
    );
  }
}

是否可以在 Flutter 中创建一个 table 的内容按钮？

is it possible to create a table of contents button in Flutter?

button

tableofcontents

drawer

flutter