flutter - 列的颤振溢出问题

Question

我有一个列溢出问题。我尝试使用扩展，但它没有帮助我。我试图返回一个列并在其中一个容器，但它也没有解决溢出问题。我希望盒子的大小是可变的，这样当里面有更多的文本/数据时，它会更大，反之亦然。

有人可以解释一下我的问题吗？

代码

import 'package:auto_route/auto_route.dart';
import 'package:built_value/serializer.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:flutter_form_bloc/flutter_form_bloc.dart';
import 'package:mealapp/models/global.dart';
import 'package:mealapp/models/serializers.dart';
import 'package:mealapp/models/shopping_list/shopping_list.dart';
import 'package:mealapp/router/router.gr.dart';

class ShoppingPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: darkGreyColor,
      floatingActionButton: FloatingActionButton(
        onPressed: () => ExtendedNavigator.rootNavigator
            .pushNamed(Routes.shoppingFormScreen),
        child: Icon(Icons.add),
        backgroundColor: redColor,
      ),
      body: Column(
        children: <Widget>[
          Container(
            padding: EdgeInsets.only(left: 20, top: 30),
            height: 160,
            width: double.infinity,
            decoration: BoxDecoration(
              borderRadius: BorderRadius.only(
                bottomLeft: Radius.circular(50),
                bottomRight: Radius.circular(50),
              ),
              color: Colors.white,
            ),
            child: Text(
              "Shop Plan",
              style: mealPlanTitleStyle,
            ),
          ),
          Expanded(
            child: StreamBuilder<QuerySnapshot>(
              stream:
                  Firestore.instance.collection('shopping_list').snapshots(),
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(child: CircularProgressIndicator());
                }
                if (snapshot.hasData) {
                  final meals = <ShoppingList>[];
                  for (final doc in snapshot.data.documents) {
                    final meal = serializers.deserialize(
                      doc.data,
                      specifiedType: const FullType(ShoppingList),
                    ) as ShoppingList;
                    meals.add(meal);
                  }

                  if (meals.isEmpty) {
                    return Center(
                      child: Text(
                        'You have no Item inside the Meal list.',
                        style: TextStyle(color: Colors.white),
                      ),
                    );
                  }
                  return ListView.builder(
                    itemCount: meals.length,
                    shrinkWrap: true,
                    itemExtent: 100,
                    primary: false,
                    padding: const EdgeInsets.all(16),
                    itemBuilder: (context, index) {
                      return ShoppingListCard(meals[index]);
                    },
                  );
                }
                return SizedBox.shrink();
              },
            ),
          ),
        ],
      ),
    );
  }
}

class ShoppingListCard extends StatelessWidget {
  final ShoppingList shoppingList;

  const ShoppingListCard(this.shoppingList);

  @override
  Widget build(BuildContext context) {
    return Container(
      margin: const EdgeInsets.all(8.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Text(
            '${shoppingList.items}',
            style: TextStyle(
                fontSize: 20, fontWeight: FontWeight.bold, color: Colors.white),
            textAlign: TextAlign.center,
          ),
          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              SizedBox(width: 8, height: 50),
              FlatButton(
                color: Colors.red,
                onPressed: () => (null), //Edit delete Data from Firestore
                shape: RoundedRectangleBorder(
                    borderRadius: BorderRadiusDirectional.circular(12)),
                child: Row(
                  children: <Widget>[
                    Text('Delete',
                        style: TextStyle(
                            fontWeight: FontWeight.bold, color: Colors.white)),
                    Icon(Icons.delete_forever, color: Colors.white),
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(24)),
        color: lightBlueColor,
      ),
    );
  }
}

标签： flutterdart

Answer 1

包裹溢出的Text小部件Container并将溢出属性设置为Text小部件。

例子：

....

child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
         Expanded(
            child: Container (
            child: Text(
            '${shoppingList.items}',
            style: TextStyle(
                fontSize: 20, 
                fontWeight: FontWeight.bold, 
                color: Colors.white),
                textAlign: TextAlign.center,
          ),
           overflow: TextOverflow.ellipsis
     ),),),

          SizedBox(height: 10),
          Row(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              SizedBox(width: 8, height: 50),
              FlatButton(

.....

文件：

https://api.flutter.dev/flutter/rendering/TextOverflow-class.html

https://api.flutter.dev/flutter/widgets/Text-class.html