首页 > 解决方案 > Flutter 文本在右侧溢出

问题描述

我有一张卡片,左侧有一个图标,右侧有两个文本,右侧的第一个文本溢出。锄头我可以让正确的文本在达到正确的限制时下降。

      home: Scaffold(
        body: SafeArea(
          child: Container(
            height: 60,
            child: Card(
              child: Row(

                children: <Widget>[
                  Column(children: <Widget>[Padding(
                    padding: const EdgeInsets.all(10.0),
                    child: Icon(Icons.access_alarm),
                  )]),
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: <Widget>[
                    Row(

                      children: <Widget>[
                        Text(

                        'This is the text one This is the textThis is the textThis is the textThis is the text',
                      )],
                    ),
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: <Widget>[
                        Text('This is the second text'),
                      ],
                    )
                  ],),
                ],
              ),
            ),
          ),
        ),
      ),
    );```

标签: flutterdart

解决方案


因为RowColumn没有静态宽度,它会扩大到溢出屏幕。为防止这种情况,请将您的childrenwithExpanded小部件包装起来。

Scaffold(
      body: Container(
        height: 60,
        child: Card(
          child: Row(
            children: <Widget>[
              Padding(
                padding: const EdgeInsets.all(10.0),
                child: Icon(Icons.access_alarm),
              ),
              Expanded(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Text(
                      'This is the text one This is the textThis is the textThis is the textThis is the text',
                    ),
                    Text('This is the second text'),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    ),

我对您的代码进行了一些修改,因为有一些不必要的小部件。


推荐阅读