代码之家 › 专栏 › 技术社区 › shawon191

颤振线性推进指示器相对高度

flutter-layout dart flutter

shawon191 · 技术社区 · 5 年前

我试图在一个容器中显示一个进度条,其中有几个项目。问题是我无法找到一种方法使进度条的高度与容器的高度相同(我不想使容器的高度固定)。为数不多的例子 LinearProgressIndicator 我找到了所有的用途 SizedBox 设置一个固定的高度。如何设置进度条相对于容器的高度?

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        LinearProgressIndicator(
          value: 0.5,
          valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}

DartPad链接- https://dartpad.dev/be0ae9c94833d27134256763136cfca1

1 回复 | 直到 5 年前

Thierry 5 年前

解决方案1

使用 fit: StackFit.expand Stack :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      fit: StackFit.expand,
      children: [
        LinearProgressIndicator(
          value: 0.5,
          valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}

解决方案2

Positioned.fill LinearProgressIndicator :

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Stack(
      children: [
        Positioned.fill(
          child: LinearProgressIndicator(
            value: 0.5,
            valueColor: AlwaysStoppedAnimation<Color>(Color(0x88888888)),
          ),
        ),
        Container(
          child: Column(children: [
              Text(
                "Title",
                textScaleFactor: 1.2,
                style: TextStyle(color: Colors.white38),
              ),
              Text(
                "Content",
                textScaleFactor: 2,
                style: TextStyle(color: Colors.white),
              )
            ])
        )
      ],
    );
  }
}

推荐文章

Arjun Malhotra · 为什么Circle头像最初显示的是蓝色背景,而不是默认的图片集Flatter?

4 年前

LaurenTsai · 如何在Flatter中的BottomAppBar中的图标下方创建文本?

4 年前

liangqicai · 使用ExpansionPanel时,我应该如何处理按钮溢出

4 年前

nita makavana · 颤振错误:位置参数太多:应为0,但在streambuilder中找到1

4 年前

Pramod Yadav · ListView小部件中的颤振堆栈小部件?

4 年前

Jiehfeng · 如何在代码中启用TextFormField中的图标?

4 年前

8oh8 · 如何在颤振中更改状态栏和应用程序栏的颜色?

8 年前

Robbert · 在颤振中选择后更改ListTile的背景色

8 年前

Nicolás Carrasco-Stevenson ISURU · 颤振中基于百分比的布局

8 年前

Marcin SzaÅek · 颤振-隐藏浮动动作按钮

8 年前