如何使小部件靈活，以免小部件溢出？

Question

我有一個帶有不同小部件的頁面，這些是圖標、文本、照片容器。 添加另一個圖標或擴展文本時，我收到小部件溢出錯誤。 告訴我如何使所有小部件靈活，例如，如果我添加另一個圖標並添加另一個很長的新文本以便沒有溢出錯誤？ 我將不勝感激。

            Padding(
              padding: const EdgeInsets.only(left: 15, right: 10),
              child: Row(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  Column(
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Row(
                        children: [
                          const SizedBox(width: 13),
                          SvgPicture.asset(
                            constants.Assets.dateDropdown,
                            height: 42,
                          ),
                          const SizedBox(width: 18),
                          const Text.rich(
                            TextSpan(
                              text: 'Available for ',
                              style: constants
                                  .Styles.normalBookTextStyleWhite,
                              children: [
                                TextSpan(
                                  text: '2h\n',
                                  style: constants
                                      .Styles.normalHeavyTextStyleWhite,
                                ),
                                TextSpan(
                                  text: 'from your arrival',
                                  style: constants
                                      .Styles.normalBookTextStyleWhite,
                                ),
                              ],
                            ),
                          )
                        ],
                      ),
                      const SizedBox(height: 25),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.start,
                        children: [
                          const SizedBox(width: 17),
                          SvgPicture.asset(
                            constants.Assets.lightning,
                            height: 42,
                          ),
                          const SizedBox(width: 28),
                          Text(
                            '${station.getPortCurrentText} (${station.getCurrentPower} kW)',
                            style: constants
                                .Styles.normalBookTextStyleWhite,
                          )
                        ],
                      ),
                    ],
                  ),
                  const SizedBox(width: 20),
                  _stationImage(station),
                ],
              ),
            ),

  Widget _stationImage(PublicChargingStationModel station) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: SizedBox(
        height: 125,
        width: 90,
        child: station.picture != null && station.picture!.isNotEmpty
            ? CachedNetworkImage(
                imageUrl: station.picture!,
                imageBuilder: (context, imageProvider) => Container(
                  width: 78,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => Center(
                  child: Container(
                    width: 78,
                    height: 116,
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator(
                      color: constants.Colors.purpleMain,
                    ),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(
                  Icons.error,
                  color: constants.Colors.purpleMain,
                ),
              )
            : Image.asset(
                constants.Assets.publicStation,
                fit: BoxFit.cover,
              ),
      ),
    );
  }

Answer 1

您是否嘗試將小部件包裝在 ScrollView 中，這是文檔。 https://api.flutter.dev/flutter/widgets/CustomScrollView-class.html

Answer 2

您需要使用Expanded小部件將小部件包裝成行

 Padding(
     padding: const EdgeInsets.only(left: 15, right: 10),
     child: Row(
       crossAxisAlignment: CrossAxisAlignment.start,
       children: [
         Expanded(
           child: Column(
             crossAxisAlignment: CrossAxisAlignment.start,
             children: [
               Row(
               children: [
                 const SizedBox(width: 13),
                 Expanded(
                   child: SvgPicture.asset(
                       constants.Assets.dateDropdown,
                       height: 42,
                       ),
                 ),
                 const SizedBox(width: 18),
                 Expanded( 
                   child:const Text.rich(
                           TextSpan(
                             text: 'Available for ',
                             style: constants.Styles.normalBookTextStyleWhite,
                             children: [
                               TextSpan(
                                 text: '2h\n',
                                 style: constants
                                     .Styles.normalHeavyTextStyleWhite,
                               ),
                               TextSpan(
                                 text: 'from your arrival',
                                 style: constants
                                     .Styles.normalBookTextStyleWhite,
                               ),
                             ],
                           ),
                         )
                          ),
                       ],
                     ),
                 
                     const SizedBox(height: 25),
                     Row(
                       mainAxisAlignment: MainAxisAlignment.start,
                       children: [
                         const SizedBox(width: 17),
                          Expanded(
                           child:
                         SvgPicture.asset(
                           constants.Assets.lightning,
                           height: 42,
                         ),
                          ),
                         const SizedBox(width: 28),
                          Expanded(
                         child:
                         Text(
                           '${station.getPortCurrentText} (${station.getCurrentPower} kW)',
                           style: constants
                               .Styles.normalBookTextStyleWhite,
                         )
                          ),
                       ],
                     ),
                 ),
                   ],
                 ),
             ),
                 const SizedBox(width: 20),
                 Expanded(
                 child : _stationImage(station),
                 ),
               ],
             ),
             );


  Widget _stationImage(PublicChargingStationModel station) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(6),
      child: SizedBox(
        height: 125,
        width: 90,
        child: station.picture != null && station.picture!.isNotEmpty
            ? CachedNetworkImage(
                imageUrl: station.picture!,
                imageBuilder: (context, imageProvider) => Container(
                  width: 78,
                  height: 116,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(16),
                    image: DecorationImage(
                      image: imageProvider,
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
                placeholder: (context, url) => Center(
                  child: Container(
                    width: 78,
                    height: 116,
                    alignment: Alignment.center,
                    child: const CircularProgressIndicator(
                      color: constants.Colors.purpleMain,
                    ),
                  ),
                ),
                errorWidget: (context, url, error) => const Icon(
                  Icons.error,
                  color: constants.Colors.purpleMain,
                ),
              )
            : Image.asset(
                constants.Assets.publicStation,
                fit: BoxFit.cover,
              ),
      ),
    );
  }

我剛剛修改了你的代碼。 您可以在此處閱讀有關Expanded or Flexible小部件的更多信息