我可以固定一个SliverAppBar,然后在它下面滚动一个SliverList内容。是否有相当于让列表滚动到底栏下的内容?
诀窍是我希望AppBar和BottomBar同时固定以具有滚动效果。
这是Appbar的呈现
flutter - BottomBar的针脚SliverAppBar是否相同?-LMLPHP
这是底部的渲染
flutter - BottomBar的针脚SliverAppBar是否相同?-LMLPHP
我想在文字输入下翻阅信息,但没有填充颜色。
这有可能吗?谢谢您。

最佳答案

底部导航栏通常不滚动。你能把你的BottomNavigationBar放在ScaffoldbottomNavigationBar槽里,如果你想把它放进或放在视野之外,你能用一个AnimatedCrossFade吗?如果这不能解决您的用例,请更具体地说明您想要实现的滚动效果。
编辑:如果您只想将一个小部件放在屏幕底部,并将其堆叠在列表上,则可以使用Stack
flutter - BottomBar的针脚SliverAppBar是否相同?-LMLPHP

import 'dart:collection';
import 'package:flutter/scheduler.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColorBrightness: Brightness.light,
      ),
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  State createState() => new MyHomePageState();
}


class MyHomePageState extends State<MyHomePage> {
  ScrollController _scrollController = new ScrollController();

  List<Widget> _items = new List.generate(60, (index) {
    return new Text("item $index");
  });

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      body: new Stack(
        children: [
          new ListView(
            controller: _scrollController,
            children: new UnmodifiableListView(_items),
          ),
          new Positioned(
            top: 0.0,
            left: 0.0,
            right: 0.0,
            child: new AppBar(
              elevation: 0.0,
              backgroundColor: Colors.white.withOpacity(0.8),
              title: new Text('Sliver App Bar'),
            ),
          ),
          new Positioned(
            left: 0.0,
            right: 0.0,
            bottom: 0.0,
            child: new Container(
              decoration: new BoxDecoration(
                border: new Border.all(
                  width: 3.0,
                  color: Colors.blue.shade200.withOpacity(0.5)
                ),
                color: Colors.white.withOpacity(0.8),
                borderRadius: new BorderRadius.all(
                  new Radius.circular(10.0),
                ),
              ),
              height: 40.0,
              margin: const EdgeInsets.symmetric(
                horizontal: 20.0, vertical: 10.0)
            ),
          ),
        ],
      ),
    );
  }
}

10-05 20:59