如何在应用程序栏底部放置线性进度条？

Question

如何在不使用appbar的bottom属性且不增加appbar高度的情况下将线性进度条放置在appbar底部？

就像下面的图片：Material design appbar

Answer 1

为什么不想使用bottom属性？这就是Flutter AppBar小部件提供的用于在其中添加内容的钩子。否则，您必须创建自己的AppBar版本。

如果对您有用，我在下面创建了您可以在您的应用栏中使用的代码段。

  appBar: new AppBar(
    title: new Text("Title"),
    backgroundColor: Colors.orange,
    bottom: MyLinearProgressIndicator(
      backgroundColor: Colors.orange,
    ),
  ),

MyLinearProgressIndicator必须实现preferredSize getter。因此，您需要创建自己的版本。

// Cant't use _kLinearProgressIndicatorHeight 'cause it is private in the
// progress_indicator.dart file
const double _kMyLinearProgressIndicatorHeight = 6.0;

class MyLinearProgressIndicator extends LinearProgressIndicator
    implements PreferredSizeWidget {
  MyLinearProgressIndicator({
    Key key,
    double value,
    Color backgroundColor,
    Animation<Color> valueColor,
  }) : super(
          key: key,
          value: value,
          backgroundColor: backgroundColor,
          valueColor: valueColor,
        ) {
    preferredSize = Size(double.infinity, _kMyLinearProgressIndicatorHeight);
  }

  @override
  Size preferredSize;
}

这是结果：

Answer 2

@@ chemamolins的答案是完全正确的，但是仅将小部件包装在Preferred Size小部件中可能会更容易。小部件带有child和preferredSize类型的Size。这是我正在处理的应用程序的一个示例，包装了StreamBuilder：

return Scaffold(
  appBar: AppBar(
    bottom: PreferredSize(
              preferredSize: Size(double.infinity, 1.0),
              child: ProgressBar(widget.bloc.isLoading),
    ),

---snip---

class ProgressBar extends StatelessWidget {
  final Stream<bool> _isLoading;
  ProgressBar(this._isLoading);

  @override
  Widget build(BuildContext context) {
    return StreamBuilder(
      stream: _isLoading,
      builder: (context, snapshot) {
        if (snapshot.hasData && snapshot.data) {
          return LinearProgressIndicator();
        }
        else {
          return Container();
        }
      }
    );
  }
}

Answer 3

只需将LinearProgressIndicator()用作column中的第一个小部件。然后，您将在Appbar

下获得进度栏

return Scaffold(
appbar: Appbar(
title: Text('App Bar'),),
body: Column(
children: <widget> [
linearProgressIndicator(),
Text('Hi'),]
),
)

Answer 4

Chemamolins' answer是正确的，但是我觉得LinearProgressIndicator的厚度比应该的要厚一些。我的版本：

AppBar(
  title: Text("Title"),
  bottom: _AppBarProgressIndicator()
);

班级：

const double _kAppBarProgressIndicatorHeight = 4.0;

class _AppBarProgressIndicator extends SizedBox implements PreferredSizeWidget {
  AppBarProgressIndicator({ Key key }) : super(
    key: key,
    height: _kAppBarProgressIndicatorHeight,
    child: LinearProgressIndicator()
  );

  @override
  Size get preferredSize => Size(
    double.infinity,
    _kAppBarProgressIndicatorHeight
  );
}

Adil Sadik's otimization更好：

AppBar(
  title: Text("Title"),
  bottom: _createProgressIndicator()
);

方法：

PreferredSize _createProgressIndicator() => PreferredSize(
  preferredSize: Size(double.infinity, 4.0),
  child: SizedBox(
    height: 4.0,
    child: LinearProgressIndicator()
  )
);

Answer 5

完整代码在这里，

appBar的高度设置为首选大小。

在线测试：https://dartpad.dartlang.org/flutter

import 'package:flutter/material.dart';


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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: HomePage(),
        ),
      ),
    );
  }
}


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

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

class _HomePageState extends State<HomePage> {
  bool contactingServer = true; // change this as needed and call setState afterwards

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: appBarWgt(),
        body: Container(),
      ),
    );
  }

  appBarWgt() {
    double appBarHeight = 56;
    double progressBarHeight = 5;
    return PreferredSize(
      preferredSize: Size.fromHeight(appBarHeight + progressBarHeight), // here the desired height
      child: AppBar(
        title: Text('Home'),
        titleSpacing: 0,
        centerTitle: true,
        bottom: linearProgressBar(progressBarHeight),
      ),
    );
  }

  linearProgressBar(_height) {
    if (!contactingServer) {
      return null;
    }
    return PreferredSize(
      child: SizedBox(
        width: double.infinity,
        height: _height,
        child: LinearProgressIndicator(),
      ),
      preferredSize: const Size.fromHeight(0),
    );
  }
}

我希望这会有所帮助，

谢谢