翩翩起舞 :- 行列布局-文字溢出和间隔符消失。

我创建了一个布局(代码如下),但我遇到了2个问题。

enter image description here

Issue 1: bottomRightSection中的文本溢出屏幕外,而不是进入下一行。

我试着把它放在wrap和容器部件中,我也试着添加最大行数属性,但它仍然溢出屏幕外。

Issue 2: 在topRightSection上,我想把Text和Icon按钮移到屏幕右端。

当我在中间添加Spacer(),或者用ExpandedFlexible包裹它们时,它们就消失了。

我将感谢您的时间和支持

import 'package:flutter/material.dart';

class ProductItemUi extends StatefulWidget {
  @override
  _ProductItemUiState createState() => _ProductItemUiState();
}

class _ProductItemUiState extends State<ProductItemUi> {
  @override
  Widget build(BuildContext context) {
    Widget leftSection() {
      return Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisAlignment: MainAxisAlignment.center,
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Text(
            'New',
            style: TextStyle(
              color: Colors.red,
              fontSize: 18.0,
              fontWeight: FontWeight.w400,
            ),
          ),
          SizedBox(
            height: 10.0,
          ),
          CircleAvatar(
            backgroundColor: Colors.grey,
            radius: 25.0,
          ),
        ],
      );
    }

    Widget topRightSection() {
      return Row(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              Text(
                'Product Name',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 18.0,
                ),
              ),
              Text(
                'Product Price',
                style: TextStyle(
                  color: Colors.black,
                  fontSize: 15.0,
                ),
              ),
            ],
          ),
          //Spacer(),
          FlatButton(
            onPressed: () {},
            child: Text(
              'Cart',
              style: TextStyle(
                color: Colors.black,
                fontSize: 15.0,
              ),
            ),
          ),
          IconButton(
            onPressed: () {},
            icon: Icon(
              Icons.more_vert,
              color: Colors.black,
            ),
          )
        ],
      );
    }

    Widget bottomRightSection() {
      return Container(
        color: Colors.grey[300],
        height: 50.0,
        child: Text(
          'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
          maxLines: 2,
          overflow: TextOverflow.fade,
          softWrap: false,
          style: TextStyle(
            color: Colors.black,
            fontSize: 15.0,
          ),
        ),
      );
    }

    return Scaffold(
      backgroundColor: Colors.black,
      body: Container(
        margin: EdgeInsets.only(top: 100.0),
        width: MediaQuery.of(context).size.width,
        height: 100.0,
        color: Colors.white,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            leftSection(),
            SizedBox(
              width: 5.0,
            ),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                topRightSection(),
                bottomRightSection(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

解决方案:

你只需要使用 ExpandedMediaQuery 正确,只是我在下面的例子中使用。

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';

class HomeScreen extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _HomeScreen();
  }
}

class _HomeScreen extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    return Container(
          color: Colors.white,
          child:
          Wrap(
            children: <Widget>[
              Container(
                height: MediaQuery.of(context).size.width * 0.3,
                color: Colors.lightGreen,
                margin: EdgeInsets.only(top: 20.0, left: 5.0, right: 5.0),
                padding: EdgeInsets.all(5.0),
                child: Row(
                  children: <Widget>[
                    Expanded(
                      flex: 2,
                      child: Align(
                        alignment: Alignment.center,
                        child: Column(
                          children: <Widget>[
                            Text(
                              'New',
                              style: TextStyle(
                                color: Colors.red,
                                fontSize: 18.0,
                                fontWeight: FontWeight.w400,
                              ),
                            ),
                            SizedBox(
                              height: 10.0,
                            ),
                            CircleAvatar(
                              backgroundColor: Colors.grey,
                              radius: MediaQuery.of(context).size.width * 0.08,
                            ),
                          ],
                        ),
                      ),
                    ),
                    Expanded(
                      flex: 8,
                      child: Column(
                        children: <Widget>[
                          Expanded(
                            flex: 5,
                            child: Row(
                              children: <Widget>[
                                Expanded(
                                  flex: 6,
                                  child: Align(
                                    alignment: Alignment.centerLeft,
                                    child: Column(
                                      children: <Widget>[
                                        Text(
                                          'Product Name',
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 18.0,
                                          ),
                                        ),
                                        Text(
                                          'Product Price',
                                          style: TextStyle(
                                            color: Colors.black,
                                            fontSize: 15.0,
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                ),
                                Expanded(
                                  flex: 4,
                                  child:

                                  Align(
                                    alignment: Alignment.topRight,
                                    child: Row(
                                      children: <Widget>[
                                        FlatButton(
                                          onPressed: () {},
                                          child: Text(
                                            'Cart',
                                            style: TextStyle(
                                              color: Colors.black,
                                              fontSize: 15.0,
                                            ),
                                          ),
                                        ),
                                        GestureDetector( onTap: () {}, child: Icon(
                                          Icons.more_vert,
                                          color: Colors.black,
                                        ) )


                                      ],
                                    ),
                                  )

                                  ,
                                )
                              ],
                            ),
                          ),
                          Expanded(
                            flex: 5,
                            child: Text(
                              'This text will be a long description about the product. Lorem ipsum dolor sit amet, consectetur adipis elit.',
                              textAlign: TextAlign.left,
                              maxLines: 3,
                              overflow: TextOverflow.ellipsis,
                              softWrap: false,
                              style: TextStyle(
                                color: Colors.black,
                                fontSize: 15.0,
                              ),
                            ),
                          )
                        ],
                      ),
                    )
                  ],
                ),
              )
            ],
          )

         ,
        );
  }
}

而输出将是像下面的enter image description here

给TA打赏
共{{data.count}}人
人已打赏
未分类

如何让一张卡片的大小根据其内的内容来调整?

2022-9-9 2:23:20

未分类

OpenCV从pyspark读取图像并传递给Keras模型。

2022-9-9 2:23:22

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索