如何在應用欄上滾動和影片物件？

根據下圖，如何將正文中的子項中的文本滾動到上方的應用欄？如何讓它從 2 行文本過渡到 1 行文本？如圖所示。

目前在我的代碼中，底部容器由一個SingleChildScrollView內部Expanded小部件組成。而不是這個，現在我想讓它一直滾動到頂部。當滾動時，它會為文本物件設定影片。

  class _FirstScreenState extends State<FirstScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Column(
        children: [
          Column(
            children: [
              Container(),
              Container(
                padding: EdgeInsets.only(),
                child: Column(
                  children: [
                    Text('Some Text...'),
                    Text('Some Secondary Text...'),
                  ],
                ),
              ),
            ],
          ),
          Container(
            child: Expanded(
              child: PageView(
                controller: _pageController,
                onPageChanged: (page) {
                  setState(() {
                    currentIndex = page;
                  });
                },
                children: [
                  SingleChildScrollView(),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
}

更新：

uj5u.com熱心網友回復：

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

  @override
  State<ExampleWidget> createState() => _ExampleWidgetState();
}

class _ExampleWidgetState extends State<ExampleWidget> {
  double maxHeaderHeight = 200;
  late ScrollController _scrollController;
  final ValueNotifier<double> opacity = ValueNotifier(0);

  @override
  void initState() {
    super.initState();

    _scrollController = ScrollController();
    _scrollController.addListener(scrollListener);
  }

  scrollListener() {
    if (maxHeaderHeight > _scrollController.offset && _scrollController.offset > 1) {
      opacity.value = 1 - _scrollController.offset / maxHeaderHeight;
    } else if (_scrollController.offset > maxHeaderHeight && opacity.value != 1) {
      opacity.value = 0;
    } else if (_scrollController.offset < 0 && opacity.value != 0) {
      opacity.value = 1;
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: CustomScrollView(
        controller: _scrollController,
        slivers: [
          SliverAppBar(
            backgroundColor: Colors.white,
            title: ValueListenableBuilder<double>(
                valueListenable: opacity,
                builder: (context, value, child) {
                  return AnimatedOpacity(
                    duration: const Duration(milliseconds: 1),
                    opacity: 1 - value,
                    child: const Text("Some Text....", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold)),
                  );
                }),
            pinned: true,
            expandedHeight: maxHeaderHeight,
            flexibleSpace: FlexibleSpaceBar(
              background: SafeArea(
                child: Center(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: const [
                      Text("Some Text....", style: TextStyle(color: Colors.black, fontWeight: FontWeight.bold, fontSize: 18)),
                      Text("Some Primary Text....", style: TextStyle(color: Colors.black, fontSize: 18)),
                    ],
                  ),
                ),
              ),
              collapseMode: CollapseMode.parallax,
            ),
          ),
          SliverList(
              delegate: SliverChildListDelegate(
            [
              Column(
                children: List.generate(
                    100,
                    (index) => Padding(
                          padding: const EdgeInsets.symmetric(vertical: 20.0),
                          child: Text("Index $index"),
                        )),
              )
            ],
          ))
        ],
      ),
    );
  }
}

標籤：扑镖动画滚动应用栏

上一篇：影片'已在iOS15.0中棄用：與影片或影片一起使用(_:value:)

下一篇：為什么我的Javascript影片在Wordpress中不起作用？