Question

我试图垂直对齐组件，但未能实现，我将以下要对齐的小部件命名为 A，B，C 。下面是演示的图片：

因此您可以看到图片 A 只是一张卡片，然后 B 是可以滚动的ListView，然后 C 是一张文字加上 Horizontal ListView ，但看不到，因为您可以在底部看到黄色的黑色线条。（这就是我要摆脱的东西）

我已经实现了很多解决方法，例如实现或包装：

Expanded。
SingleChildScrollView

但没有任何效果。

我将 A，B 和 C 包裹在列中，并尝试使用Expanded（如我上面所述的），尽管C仍然不可见。

下面是我的代码：

 @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        TopStory(),
        Expanded(
          flex: 5,
          child: Container(
            constraints: BoxConstraints(
              maxHeight: 300.0
            ),
            child: ListView(
              shrinkWrap: true,
              children: <Widget>[
                Container(
                    alignment: Alignment.topLeft,
                    padding: EdgeInsets.only(top: 30.0, left: 20.0, bottom: 10.0),
                    // width: 50.0,
                    child: Text(
                      'Recent Stories',
                      style: TextStyle(
                        fontSize: 17.0,
                        fontWeight: FontWeight.bold,
                      ),
                    )),
                Container(
                    margin: EdgeInsets.only(left: 20.0, right: 20.0),
                    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                        color: Colors.black26,
                      )),
                    ),
                    child: ArticleList()),
                Container(
                    margin: EdgeInsets.only(left: 20.0, right: 20.0),
                    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                        color: Colors.black26,
                      )),
                    ),
                    child: ArticleList()),
                Container(
                    margin: EdgeInsets.only(left: 20.0, right: 20.0),
                    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                        color: Colors.black26,
                      )),
                    ),
                    child: ArticleList()),
                Container(
                    margin: EdgeInsets.only(left: 20.0, right: 20.0),
                    padding: EdgeInsets.only(top: 10.0, bottom: 10.0),
                    decoration: BoxDecoration(
                      border: Border(
                          top: BorderSide(
                        color: Colors.black26,
                      )),
                    ),
                    child: ArticleList()),
              ],
            ),
          ),
        ),
        Expanded(
          flex: 1,
            child: MoreCategoriesPage(),
        )

      ],
    );
  }

您会看到代码 A 是TopStory()，然后 B 是ListView，最后C是MoreCategoriesPage() 。就我而言，我认为MoreCategoriesPage()对齐良好，但由于它具有水平ListView ，因此我也要显示代码。

下面是 MoreCategoriesPage 类：

class MoreCategoriesPage extends StatefulWidget {
  @override
  _MoreCategoriesPageState createState() => _MoreCategoriesPageState();
}

class _MoreCategoriesPageState extends State<MoreCategoriesPage> {
  List<MoreCategoryModel> _list = new List();
  int moreCatColorOne = 0xFF8A0000;
  int moreCatColorTwo = 0xFFB00222;
  int moreCatColorThree = 0xFFC21828;
  int moreCatColorFour = 0xFFD2232A;
  int moreCatColorFive = 0xFFD2232A;
  Color moreCatColorText = const Color(0xFF9E9E9E);

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    _list.add(MoreCategoryModel(Icons.business, "Business", moreCatColorOne));
    _list.add(
        MoreCategoryModel(Icons.insert_chart, "Statistics", moreCatColorTwo));
    _list.add(MoreCategoryModel(Icons.school, "Education", moreCatColorThree));
    _list.add(MoreCategoryModel(
        Icons.directions_transit, "Transport", moreCatColorFour));
    _list.add(MoreCategoryModel(
        Icons.supervisor_account, "Social", moreCatColorFive));

    return Container(
      child: Column(
        children: <Widget>[
          Container(
            alignment: Alignment.topLeft,
            padding: EdgeInsets.only(top: 30.0, left: 20.0, bottom: 10.0),
            // width: 50.0,
            child: Text(
              'More Categories',
              style: TextStyle(
                fontSize: 17.0,
                fontWeight: FontWeight.bold,
              ),
            )),
          Expanded(child: buildMoreCategoryList(_list))
        ],
      ),
    );
  }

  Widget buildMoreCategoryList(List<MoreCategoryModel> more_categories) {
    return ListView.builder(
        scrollDirection: Axis.horizontal,
        itemCount: 5,
        itemBuilder: (ctx, position) {
          return Row(
            children: <Widget>[
              Column(
                children: <Widget>[
                  Card(
                      clipBehavior: Clip.antiAliasWithSaveLayer,
                      elevation: 2,
                      color: Color(more_categories[position].color),
                      margin: EdgeInsets.all(10),
                      child: Padding(
                        padding: const EdgeInsets.all(23.0),
                        child: Icon(
                          more_categories[position].iconCategory,
                          color: Colors.white,
                        ),
                      )),
                  Text(
                    more_categories[position].nameCategory,
                    style: TextStyle(color: moreCatColorText),
                  )
                ],
              ),
            ],
          );
        });
  }

这是错误消息：

════════ Exception caught by rendering library ═════════════════════════════════════════════════════
The following assertion was thrown during layout:
A RenderFlex overflowed by 16 pixels on the bottom.

The relevant error-causing widget was: 
  Column file:///D:/workspace/newvisionapp/lib/src/ui/more_category/more_category.dart:37:14
The overflowing RenderFlex has an orientation of Axis.vertical.
The edge of the RenderFlex that is overflowing has been marked in the rendering with a yellow and black striped pattern. This is usually caused by the contents being too big for the RenderFlex.

Consider applying a flex factor (e.g. using an Expanded widget) to force the children of the RenderFlex to fit within the available space instead of being sized to their natural size.
This is considered an error condition because it indicates that there is content that cannot be seen. If the content is legitimately bigger than the available space, consider clipping it with a ClipRect widget before putting it in the flex, or using a scrollable container rather than a Flex, like a ListView.

The specific RenderFlex in question is: RenderFlex#28b08 relayoutBoundary=up1 OVERFLOWING
...  needs compositing
...  parentData: offset=Offset(0.0, 439.5); flex=1; fit=FlexFit.tight (can use size)
...  constraints: BoxConstraints(0.0<=w<=411.4, h=43.9)
...  size: Size(411.4, 43.9)
...  direction: vertical
...  mainAxisAlignment: start
...  mainAxisSize: max
...  crossAxisAlignment: center
...  verticalDirection: down
◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤◢◤

RenderFlex在底部溢出了16个像素。溢出的RenderFlex的方向为Axis.vertical

0 个答案: