Flutter 颤振：-行-列布局-文本溢出和间隔符消失_Flutter

Flutter 颤振：-行-列布局-文本溢出和间隔符消失

flutter

Flutter 颤振：-行-列布局-文本溢出和间隔符消失,flutter,Flutter,我创建了一个布局（代码如下），但我面临两个问题问题1:bottomRightSection中的文本溢出到屏幕外，而不是进入下一行我试着把它放在一个包装和容器小部件中，我也试着添加max-lines属性，但它仍然在外部溢出第2期：在TopRight部分，我想将文本和图标按钮移动到屏幕右端当我在它们之间添加间隔符（）或将它们包装成展开/柔性时，它们就会消失我将感谢您的时间和支持 import 'package:flutter/material.dart'; class ProductI

我创建了一个布局（代码如下），但我面临两个问题

问题1:

bottomRightSection中的文本溢出到屏幕外，而不是进入下一行

我试着把它放在一个包装和容器小部件中，我也试着添加max-lines属性，但它仍然在外部溢出

第2期：

在TopRight部分，我想将文本和图标按钮移动到屏幕右端

当我在它们之间添加间隔符（）或将它们包装成展开/柔性时，它们就会消失

我将感谢您的时间和支持

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(),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

导入“包装：颤振/材料.省道”；
类ProductItemUi扩展StatefulWidget{
@凌驾
_ProductItemUiState createState（）=>\u ProductItemUiState（）；
}
类_ProductItemUiState扩展状态{
@凌驾
小部件构建（构建上下文）{
窗口小部件leftSection（）{
返回列(
crossAxisAlignment:crossAxisAlignment.center，
mainAxisAlignment:mainAxisAlignment.center，
mainAxisSize:mainAxisSize.min，
儿童：[
正文(
"新",，
样式：TextStyle(
颜色：颜色，红色，
字体大小：18.0，
fontWeight:fontWeight.w400，
),
),
大小盒子(
身高：10.0，
),
圆形(
背景颜色：颜色。灰色，
半径：25.0，
),
],
);
}
小部件topRightSection（）{
返回行(
crossAxisAlignment:crossAxisAlignment.center，
儿童：[
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
正文(
“产品名称”，
样式：TextStyle(
颜色：颜色，黑色，
字体大小：18.0，
),
),
正文(
"产品价格",，
样式：TextStyle(
颜色：颜色，黑色，
字体大小：15.0，
),
),
],
),
//垫片（），
扁平按钮(
按下：（）{}，
子：文本(
“购物车”，
样式：TextStyle(
颜色：颜色，黑色，
字体大小：15.0，
),
),
),
图标按钮(
按下：（）{}，
图标：图标(
图标。更多信息，
颜色：颜色，黑色，
),
)
],
);
}
Widget bottomRightSection（）{
返回容器(
颜色：颜色。灰色[300]，
身高：50.0，
子：文本(
“本文将对该产品进行详细描述。Lorem ipsum dolor sit amet，Concertetur adipis elit。”，
maxLines:2，
溢出：TextOverflow.fade，
软包装：错误，
样式：TextStyle(
颜色：颜色，黑色，
字体大小：15.0，
),
),
);
}
返回脚手架(
背景颜色：Colors.black，
主体：容器(
边距：仅限边缘集（顶部：100.0），
宽度：MediaQuery.of（context）.size.width，
高度：100.0，
颜色：颜色，白色，
孩子：排(
crossAxisAlignment:crossAxisAlignment.start，
mainAxisAlignment:mainAxisAlignment.start，
mainAxisSize:mainAxisSize.min，
儿童：[
leftSection（），
大小盒子(
宽度：5.0，
),
纵队(
crossAxisAlignment:crossAxisAlignment.start，
儿童：[
topRightSection（），
bottomRightSection（），
],
),
],
),
),
);
}
}

您只需要正确地使用扩展的和，就像我在下面的示例中使用的那样 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, ), ), ) ], ), ) ], ), ) ], ) , ); } } import'包装：flift/cupertino.dart'；进口“包装：颤振/材料.省道”；导入“package:flatter/rendering.dart”；类主屏幕扩展StatefulWidget{ @凌驾状态createState（）{ //TODO:实现createState 返回主屏幕（）； } } 类_主屏幕扩展状态{ @凌驾小部件构建（构建上下文）{ 返回容器( 颜色：颜色，白色，儿童：包裹( 儿童：[ 容器( 高度：MediaQuery.of（上下文）.size.width*0.3，颜色：颜色。浅绿色，边距：仅限边集（顶部：20.0，左侧：5.0，右侧：5.0），填充：所有边缘设置（5.0），孩子：排( 儿童：[ 扩大( 弹性：2，子对象：对齐( 对齐：对齐.center，子：列( 儿童：[ 正文( "新",，样式：TextStyle( 颜色：颜色，红色，字体大小：18.0， fontWeight:fontWeight.w400， ), ), 大小盒子( 身高：10.0， ), 圆形( 背景颜色：颜色。灰色，半径：MediaQuery.of（上下文）.size.width*0.08， ), ], ), ), ), 扩大( 弹性：8，子：列( 儿童：[