一个 RenderFlex 溢出 Flutter

Elexer 发表于 Dev

电子琴

尝试使用带有堆栈和列的定位，得到错误：

“RenderFlex 在底部溢出了 72 个像素。”

“RenderFlex 在底部溢出了 46 个像素。” 等等...

我的块的一部分消失在滑块中，我尝试只使用堆叠和几个定位到图片底部，但部分图片被关闭。

我的飞镖：

final List<Widget> imageSliders = imgList.map((item) => Container(
    child: Container(
    child: ClipRRect(
        borderRadius: BorderRadius.all(Radius.circular(30.0)),
        child: Stack(
          children: <Widget>[
            Container(
                alignment: Alignment.bottomCenter,
                decoration: BoxDecoration(color: Colors.white),
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Image.asset('assets/psplus-1month.png', fit: BoxFit.cover, width: 1000.0),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(top: 20.0),
                      child: Text(
                        'Playstation Plus',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFF4F4F4F),
                          fontSize: 16,
                          fontWeight: FontWeight.bold,
                        ),
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(bottom: 5.0, top:5.0),
                      child: Text(
                        '1 месяц',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFFA5ABC8),
                          fontSize: 12,
                        ),
                      ),
                    ),
                    Container(
                      decoration: BoxDecoration(color: Colors.white),
                      padding: EdgeInsets.only(bottom: 10.0),
                      child: Text(
                        '1 500 рублей',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: const Color(0xFF789EEB),
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                        ),
                      ),
                    )
                  ],
                ),
              ),
              Positioned(
                bottom: 35.0,
                left: 0.0,
                right: 0.0,
                child: Column(
                  mainAxisSize: MainAxisSize.max,
                  crossAxisAlignment: CrossAxisAlignment.stretch,
                  children: <Widget>[
                    Container(
                      decoration: BoxDecoration(
                        color: Colors.white,
                        shape: BoxShape.circle,
                        boxShadow: [BoxShadow(blurRadius: 10, color: Colors.black.withOpacity(0.10), spreadRadius: 5)],
                      ),
                      child: CircleAvatar(
                        backgroundColor: Colors.white,
                        radius: 15,
                        child: Icon(Icons.add),
                      ),
                    )
                  ],
                ),
              ),
          ],
        )
    ),
  ),
)).toList();

CarouselSlider(
    options: CarouselOptions(
        autoPlay: false,
        aspectRatio: 2.0,
        enlargeCenterPage: true,
        viewportFraction: 0.6,
    ),
    items: imageSliders,
)

视觉示例截图：

鲁斯兰贝克0809

如果我理解你很清楚，我建议你使用LayoutBuilder小部件来获取父小部件的约束，即CarouselSlider.

输出

完整代码


class MyHomePage extends StatefulWidget {
  final Function onItemPressed;

  MyHomePage({
    Key key,
    this.onItemPressed,
  }) : super(key: key);

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

class _MyHomePageState extends State<MyHomePage> {
  List<String> imgList = [
    'assets/veg.png',
    'assets/veg.png',
    'assets/veg.png',
    'assets/veg.png',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Padding(
        padding: const EdgeInsets.only(top: 50),
        child: CarouselSlider(
          options: CarouselOptions(
            autoPlay: false,
            enlargeCenterPage: true,
            aspectRatio: 16 / 10,
            viewportFraction: 0.6,
          ),
          items: imgList
              .map(
                (item) => LayoutBuilder(
                  builder: (context, constraints) {
                    return ClipRRect(
                      borderRadius: BorderRadius.all(
                        Radius.circular(20.0),
                      ),
                      child: Stack(
                        children: <Widget>[
                          Container(
                            decoration: BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.all(
                                Radius.circular(20.0),
                              ),
                            ),
                            child: Column(
                              mainAxisSize: MainAxisSize.min,
                              children: <Widget>[
                                Image.asset(
                                  '$item',
                                  fit: BoxFit.cover,
                                  width: constraints.maxWidth,
                                  height: constraints.maxHeight / 2,
                                ),
                                SizedBox(height: 23),
                                Text(
                                  'Playstation Plus',
                                  textAlign: TextAlign.center,
                                  style: TextStyle(
                                    color: const Color(0xFF4F4F4F),
                                    fontSize: 16,
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                                SizedBox(height: 5),
                                Text(
                                  '1 месяц',
                                  style: TextStyle(
                                    color: const Color(0xFFA5ABC8),
                                    fontSize: 12,
                                  ),
                                ),
                                SizedBox(height: 5),
                                Text(
                                  '1 500 рублей',
                                  style: TextStyle(
                                    color: const Color(0xFF789EEB),
                                    fontSize: 16,
                                    fontWeight: FontWeight.w600,
                                  ),
                                ),
                                SizedBox(height: 5),
                              ],
                            ),
                          ),
                          Positioned(
                            bottom: constraints.maxHeight / 2 - 18,
                            left: 0.0,
                            right: 0.0,
                            child: Column(
                              mainAxisSize: MainAxisSize.max,
                              crossAxisAlignment: CrossAxisAlignment.stretch,
                              children: <Widget>[
                                Container(
                                  decoration: BoxDecoration(
                                    color: Colors.green,
                                    shape: BoxShape.circle,
                                    boxShadow: [
                                      BoxShadow(
                                          blurRadius: 7,
                                          color: Colors.black.withOpacity(0.10),
                                          spreadRadius: 2)
                                    ],
                                  ),
                                  child: CircleAvatar(
                                    backgroundColor: Colors.white,
                                    radius: 18,
                                    child: Icon(Icons.add),
                                  ),
                                )
                              ],
                            ),
                          ),
                        ],
                      ),
                    );
                  },
                ),
              )
              .toList(),
        ),
      ),
    );
  }
}

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。