Question

在扑朔迷离中，我想在Text里面放一个简单的Container，容器上有背景色，例如：

不幸的是，我无法使用颤动的小部件设置或截屏

Expanded(
  child: Container(
    margin: EdgeInsets.only(top: 10.0),
    child: ListView(
      children: <Widget>[
        Container(
          padding: EdgeInsets.only(right: 1.0, left: 1.0),
          child: Center(
            child: bottomSheetDashBoardItems(
                widget.dashboardItems),
          ),
        ), //container
      ], //list view children
    ), //list view
  ), //container
), //Expanded


Widget bottomSheetDashBoardItems(List<DashboardItems> dashboardItems) {
  return Wrap(
    children: dashboardItems
        .map((item) => Container(
              width: 75.0,
              height: 75.0,
              margin: EdgeInsets.all(5.0),
              decoration: BoxDecoration(
                  color: Colors.white,
                  borderRadius: BorderRadius.all(Radius.circular(5.0)),
                  boxShadow: [
                    BoxShadow(
                      blurRadius: 0.5,
                      color: Colors.black,
                      offset: Offset(0.0, 0.0),
                    )
                  ]),
              child: Center(
                  child: Stack(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.only(bottom: 12.0),
                    child: Align(
                      alignment: Alignment.center,
                      child: Image.asset(
                        item.icon,
                        width: 40.0,
                        height: 40.0,
                      ),
                    ),
                  ),
                  Align(
                    alignment: Alignment.bottomCenter,
                    child: Container(
                      decoration: BoxDecoration(
                        color: Colors.indigo[400],
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5.0),
                          bottomRight: Radius.circular(5.0),
                        ),
                      ),
                      child: Padding(
                        padding: const EdgeInsets.only(top: 3.0),
                        child: Text(
                          item.title,
                          textAlign: TextAlign.center,
                          style: TextStyle(
                              color: Colors.white,
                              fontFamily: 'IranSansLight',
                              fontSize: 9.0),
                        ),
                      ),
                    ),
                  ),
                ],
              )),
            ))
        .toList());

}

结果：

Answer 1

         Align(
                alignment: Alignment.bottomCenter,
                child: Container(
            //      width: 75.0,   <--- remove this width and try
                  height: 19.0,
                  decoration: BoxDecoration(
                    color: Colors.indigo[400],
                    borderRadius: BorderRadius.only(
                      bottomLeft: Radius.circular(5.0),
                      bottomRight: Radius.circular(5.0),
                    ),
                  ),

希望工作

Answer 2

＃1

请勿通过函数初始化小部件树。在StatelessWidget下创建一个类。有关更多信息，check out this answer。

＃2

至于红色条的宽度不会自动扩大-由于您已经使用了Stack，因此我建议一种简单的解决方案。

用Align替换Stack（Positioned的第二个子代），如下所示：

Positioned(
  left: 0,
  right: 0,
  bottom: 0,
  height: 19,
  child: // ...
)

并删除width的{{1}}属性。

让我知道这是否有帮助。

扑与文本子集的容器背景

2 个答案: