Single Child Scroll

基本介紹

只有一個child，可以滾動畫面。

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: SingleChildScrollView(
      child: Column(
        children: List.generate(10, (index) {
          return Container(
            margin: EdgeInsets.only(top: 10.0),
            width: double.infinity,
            color: Colors.blue,
            height: 100,
            alignment: Alignment.center,
            child: Text("item $index"),
          );
        }),
      ),
    )));
  }
}

ScrollController

ScrollController 可以滾動頁面。
SingleChildScrollView有一個屬性controller。

jumpTo

jumpTo(位置)，因每一個元件高度是100，所以有10個元件，10 * 100就會跳到底部。

_controller.jumpTo(0);  // 跳到頂部
_controller.jumpTo(100 * 10);

maxScrollExtent

移動到底部

_controller.jumpTo(_controller.position.maxScrollExtent);

動畫效果

語法:

 _controller.animateTo(移動位置,
                duration: 多久時間, curve: 動畫效果);
 _controller.animateTo(_controller.position.maxScrollExtent,
                duration: Duration(seconds: 1), curve: Curves.easeOut);

Duration

一秒

Duration(seconds: 1)

img

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76

import 'package:flutter/material.dart';

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

class MainPage extends StatefulWidget {
  MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  ScrollController _controller = ScrollController();
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            body: Stack(children: [
      SingleChildScrollView(
        controller: _controller,
        child: Column(
          children: List.generate(10, (index) {
            return Container(
              margin: EdgeInsets.only(top: 10.0),
              width: double.infinity,
              color: Colors.blue,
              height: 100,
              alignment: Alignment.center,
              child: Text("item $index"),
            );
          }),
        ),
      ),
      Positioned(
        top: 0,
        right: 0,
        child: GestureDetector(
          onTap: () {
            _controller.jumpTo(0);
          },
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(40),
            ),
            width: 100,
            height: 100,
            alignment: Alignment.center,
            child: Text("Top"),
          ),
        ),
      ),
      Positioned(
        bottom: 0,
        right: 0,
        child: GestureDetector(
          onTap: () {
            _controller.jumpTo(100 * 10);
          },
          child: Container(
            decoration: BoxDecoration(
              color: Colors.red,
              borderRadius: BorderRadius.circular(40),
            ),
            width: 100,
            height: 100,
            alignment: Alignment.center,
            child: Text("Bottom"),
          ),
        ),
      )
    ])));
  }
}

results matching ""

    No results matching ""