Question

我有以下代码，我的文本在水平方向溢出。我尝试使用灵活和扩展小部件，但没有任何困难。

import 'package:flutter/material.dart';
import 'widget/options/qty_widget.dart';
import 'widget/options/option_widget.dart';
import 'package:provider/provider.dart';
import '../session/data.dart';
import '../cart/cart.dart';

    class AddItemPage extends StatefulWidget {
      final String title = 'Add';

      final dynamic data;
      final dynamic itemOption;

      AddItemPage(this.data, this.itemOption);

      @override
      State<StatefulWidget> createState() => AddItemPageState();
    }

    class AddItemPageState extends State<AddItemPage> {
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            backgroundColor: Colors.amber[800],
            title: Text(widget.title,
                style: TextStyle(color: Colors.amberAccent[800])),
          ),
          body: Builder(builder: (BuildContext context) {
            List<Widget> listWidget = <Widget>[];

            if (widget.data.containsKey('image')) {
              //String imagePath = "assets/images/menu/" + widget.data['image'];
              String imagePath = "assets/images/lobster_tray.png";

              listWidget.add(
                  Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                      Container(
                          child: Image.asset(
                            imagePath,
                            width: 100,
                          )),

                      Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Text(widget.data['dish'],
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                fontWeight: FontWeight.w900,
                                fontSize: 22,
                                color: Colors.black,
                              )),
                          Text(widget.data['description'],
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                fontWeight: FontWeight.normal,
                                fontSize: 16,
                                color: Colors.black,
                              )),
                          Text('\$' + widget.data['price'],
                              textAlign: TextAlign.left,
                              style: TextStyle(
                                fontWeight: FontWeight.normal,
                                fontSize: 16,
                                color: Colors.red,
                              ))
                        ],
                      ),






                    ],
                  )
                  );

            }


            listWidget.add(QtyWidget());

            if(widget.data.containsKey('option')){
              for (String optionKey in widget.data['option']){
                dynamic optionData = widget.itemOption[optionKey];
                listWidget.add(ItemOptionWidget(optionData));
              }
            }

            listWidget.add(Center(
              child: Container(
                padding: EdgeInsets.fromLTRB(0, 15, 0, 0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Container(
                        padding: const EdgeInsets.symmetric(vertical: 16.0),
                        alignment: Alignment.center,
                        child: RaisedButton(
                          onPressed: () {
                            Provider.of<PData>(context, listen: false)
                                .addItemToCart(widget.data);
                            Navigator.push(
                                context,
                                MaterialPageRoute(
                                    builder: (context) => CartPage()));
                          },
                          color: Colors.amber[800],
                          child: const Text('Add to Order'),
                        ),
                      ),
                      Container(
                        margin: EdgeInsets.fromLTRB(10, 0, 0, 0),
                        padding: const EdgeInsets.symmetric(vertical: 16.0),
                        alignment: Alignment.center,
                        child: RaisedButton(
                          onPressed: () async {
                            Navigator.pop(context, true);
                          },
                          color: Colors.grey[200],
                          child: const Text('Cancel'),
                        ),
                      ),
                    ]),
              ),
            ));

            return Container(
              padding: EdgeInsets.fromLTRB(15, 15, 15, 15),
              child: Form(
                child: ListView(
                  children: listWidget,
                ),
              ),
            );
          }),
        );
      }
    }

Answer 1

实际上您没有为行使用适当的权重，因此会发生此问题，我使用了Expanded并使用MediaQuery根据设备宽度来管理宽度，请检查以下解决方案它

class HomeScreen extends StatefulWidget {

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

class _HomeScreen extends State<HomeScreen> {
  var text =
      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum";

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
        appBar: AppBar(
          title: Text("Home"),
        ),
        body: Container(
          height: MediaQuery.of(context).size.height * 0.18,
          child: Align(
              alignment: Alignment.topCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                      width: MediaQuery.of(context).size.width * 0.3,
                      height: MediaQuery.of(context).size.height * 0.3,
                      decoration: BoxDecoration(
                        color: Colors.black,
                        borderRadius:
                        BorderRadius.all(Radius.elliptical(20.0, 20.0)),
                      )),
                  SizedBox(
                    width: 5.0,
                  ),
                  Container(
                      width: MediaQuery.of(context).size.width * 0.65,
                      child: Column(
                        mainAxisAlignment: MainAxisAlignment.start,
                        crossAxisAlignment: CrossAxisAlignment.start,
                        children: <Widget>[
                          Expanded(
                            flex:1,
                            child: Text("TITLE IS HERE",
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  fontWeight: FontWeight.w900,
                                  fontSize: 22,
                                  color: Colors.black,
                                )),
                          ),
                          Expanded(
                            flex:3,
                            child: Text(text,
                                textAlign: TextAlign.left,
                                maxLines: 3,
                                overflow: TextOverflow.ellipsis,
                                style: TextStyle(
                                  fontWeight: FontWeight.normal,
                                  fontSize: 16,
                                  color: Colors.black,
                                )),
                          ),
                          Expanded(
                            flex:1,
                            child: Text('\$ 100',
                                textAlign: TextAlign.left,
                                style: TextStyle(
                                  fontWeight: FontWeight.normal,
                                  fontSize: 16,
                                  color: Colors.red,
                                )),
                          ),
                        ],
                      ))
                ],
              )),
        ));
  }
}

然后检查它的输出

Answer 2

用Column小部件包裹Row内的Flexible小部件，该小部件将只占用渲染Column内子级所需的最小空间。下面的工作代码段：

body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: <Widget>[
            Container(
              child: Image.asset('assets/placeholder.png', width: 100)
            ),
            Flexible(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.start,
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Text('dish', textAlign: TextAlign.left, style: TextStyle(
                      fontWeight: FontWeight.w900, fontSize: 22, color: Colors.black
                  ),),

                  Text('This is a long description of the dish presented in the picture and loved by customers.',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontWeight: FontWeight.normal,
                        fontSize: 16,
                        color: Colors.black,
                      )),
                  Text('\$' + 'price',
                      textAlign: TextAlign.left,
                      style: TextStyle(
                        fontWeight: FontWeight.normal,
                        fontSize: 16,
                        color: Colors.red,
                      ))
                ],
              )
            )

          ],
        )
      )

希望这可以解决您的问题。

颤抖：-文本溢出

2 个答案: