Flutter：如何在行内设置可变长度字符串？

Question

我正在尝试在行内设置一个字符串，但是字符串的长度是可变的，即数据是从API提取的。然后将其设置在行内，但是当前，随着长度的增加，它显示为A RenderFlex overflowed by 48 pixels on the right.

我一直在尝试使用扩展的/灵活的/灵活的方法，但是出现了不正确的父错误。 （不知道该如何应对，这是我的初衷）

所以，请帮助解决如何解决renderflex溢出的问题。

以下是我的方法：

void confirmpayment(double amount, String description) {
    final itemsSubmit = <Widget>[
      Image.asset(
        'images/payments.jpg',
        width: MediaQuery.of(context).size.width,
        fit: BoxFit.contain,
      ),
      ListTile(
        title: AutoSizeText(
          'Confirmation',
          style: TextStyle(fontSize: 20),
        ),
        subtitle: AutoSizeText(
          'Hey Gaurav, please confirm examination as payment once done will be irrevocable.',
          style: TextStyle(color: Colors.grey),
        ),
        // onTap: () {},
      ),
      Row(
        mainAxisAlignment: MainAxisAlignment.start,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          SizedBox(
            width: 20,
          ),
          Padding(
            padding: EdgeInsets.only(top: 10),
            child: AutoSizeText(
              'Exam:',
              textAlign: TextAlign.start,
              style: TextStyle(
                fontSize: 16,
              ),
            ),
          ),
          Spacer(),
          CheckboxGroup(
            orientation: GroupedButtonsOrientation.VERTICAL,
            labelStyle: TextStyle(fontSize: 15),
            labels: [
              ...listexam.map((location) {
                return location['name']; //this is where string is set from api data
              }).toList()
            ],
            checked: _checked,
          ),
          SizedBox(
            width: 20,
          ),
        ],
      ),
      Divider(),
      Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: 20,
            ),
            Padding(
              padding: EdgeInsets.only(top: 1),
              child: AutoSizeText(
                'Plan',
                textAlign: TextAlign.start,
                style: TextStyle(
                  fontSize: 16,
                ),
              ),
            ),
            Expanded(
              child: Padding(
                padding: EdgeInsets.only(top: 1),
                child: AutoSizeText(
                  description,
                  textAlign: TextAlign.right,
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                    fontSize: 15,
                  ),
                ),
              ),
            ),
            SizedBox(
              width: 20,
            ),
          ]),
      SizedBox(
        height: 10,
      ),
      Row(
          mainAxisAlignment: MainAxisAlignment.start,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            SizedBox(
              width: 20,
            ),
            Padding(
                padding: EdgeInsets.only(top: 1),
                child: AutoSizeText(
                  'Amount',
                  textAlign: TextAlign.start,
                  style: TextStyle(
                    fontSize: 16,
                  ),
                )),
            Expanded(
              child: Padding(
                padding: EdgeInsets.only(top: 1),
                child: AutoSizeText(
                  'Rs. ' + amount.toString(),
                  textDirection: TextDirection.ltr,
                  textAlign: TextAlign.right,
                  style: TextStyle(
                    fontSize: 15,
                    // fontWeight: FontWeight.w500,
                  ),
                ),
              ),
            ),
            SizedBox(
              width: 20,
            ),
          ]),
      SizedBox(
        height: 40,
      ),
      Row(mainAxisAlignment: MainAxisAlignment.spaceAround, children: <Widget>[
        RaisedButton(
            elevation: 1,
            // onPressed: _showSheetSubmit,
            color: Colors.grey[200],
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(28.0),
                side: BorderSide(color: Colors.grey[200])),
            onPressed: null,
            child: AutoSizeText(
              "Cancel",
              style: TextStyle(
                fontSize: 16,
                // fontFamily: 'lato',
                letterSpacing: 1,
                color: Colors.white,
              ),
            )),
        RaisedButton(
            elevation: 1,
            color: Colors.green,
            shape: RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(28.0),
                side: BorderSide(color: Colors.green)),
            onPressed: () {
              openCheckout(amount, description);
            },
            child: AutoSizeText(
              "Buy",
              style: TextStyle(
                  fontSize: 16,
                  // fontFamily: 'lato',
                  color: Colors.white,
                  letterSpacing: 1),
            )),
      ]),
      SizedBox(
        height: MediaQuery.of(context).size.height / 12,
      ),
    ];

    showModalBottomSheet(
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10.0),
      ),
      backgroundColor: Colors.white,
      context: context,
      builder: (BuildContext _) {
        return Container(
          // color: Colors.white,
          child: Wrap(
            children: itemsSubmit,
          ),
        );
      },
      isScrollControlled: true,
      // isDismissible: true
    );
  }

以下是模拟：

Answer 1

[而不是尝试修剪将进入String小部件的Text数据，我将使用LayoutBuilder获取Row小部件可能占据的可用空间。然后，我将Text包裹在SizedBox中以限制Text小部件的最大宽度。最后，我将设置overflow小部件的Text属性，以便在文本长于可用空间时显示省略号。

这里是我为您编写的一个小应用程序，以了解如何执行此操作。您可以在DartPad上运行它以进行操作。

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            LayoutBuilder(
              builder: (context, constraints) {
                return Row(
                  children: <Widget>[
                    SizedBox(
                      width: constraints.maxWidth,
                      child: Text(
                        'This is a very very long text that might overflow the available rendering space',
                        overflow: TextOverflow.ellipsis,
                      ),
                    ),
                  ],
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}