Flutter UI相邻放置问题和列表视图高度

zeeshantariq

我正在尝试显示数据库中的一些数据,我的应用程序必须包含这样的UI。 在此处输入图片说明

但是我遇到了这种问题。

在此处输入图片说明

问题:文本溢出且没有换行(我尝试使用“灵活”和“扩展”,但会产生更多的异常,大多数是非零弹性等等)

该列表需要固定的高度和宽度,而我需要将高度设置为match_parent。double.infinity不能正常工作。

这是我的代码:

class CategoryDetailPage extends StatefulWidget {
  final Category category;

  CategoryDetailPage({Key key, this.category}) : super(key: key);

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

class _CategoryDetailPageState extends State<CategoryDetailPage> {
  DatabaseProvider databaseProvider = DatabaseProvider.instance;
  List<Phrase> phrases;
  final List<Color> _itemColors = [
    Color(0xff16a085),
    Color(0xff2980b9),
    Color(0xff8e44ad),
    Color(0xff2c3e50),
    Color(0xffd35400),
    Color(0xffbdc3c7),
    Color(0xff27ae60),
    Color(0xfff39c12),
    Color(0xff7f8c8d),
    Color(0xffc0392b),
  ];
  int _colorCounter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Row(
                children: [
                  Container(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image(
                        image: AssetImage("assets/images/categories/${widget.category.image}"),
                        width: 32,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.only(left: 16),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      mainAxisSize: MainAxisSize.min,
                      children: [
                        Text(
                          "Say ${widget.category.name}",
                          style: TextStyle(fontSize: 24, fontFamily: "Pacifico"),
                        ),

                        Text(
                          "\"${widget.category.quote}\"  --${widget.category.quoteAuthor} aaaaaaaaaaaaaaaaaaaaaaaaaaaaa",
                          textAlign: TextAlign.left,
                          style: TextStyle(
                              color: Colors.grey,
                              fontStyle: FontStyle.italic
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),

              Row(

                children: <Widget>[
                  RotatedBox(
                    quarterTurns: -1,
                    child: Column(
                      children: <Widget>[
                        Text(
                          "Informal",
                          style: TextStyle(
                              fontSize: 32,
                              color: Colors.grey.withOpacity(0.5),
                              fontFamily: "AbrilFatFace"),
                        ),
                      ],
                    ),
                  ),


                  Container(
                    height: 300,
                    width: 300,
                    child: FutureBuilder(
                      future: databaseProvider
                          .getPhrasesByCategoryId(widget.category.id),

                      builder: (context, snapshot) {
                        return snapshot.hasData
                            ? ListView.builder(
                                itemCount: snapshot.data.length,
                                itemBuilder: (context, i) {
                                  return _buildPhraseItem(snapshot.data[i]);
                                })
                            : Center(
                                child: CircularProgressIndicator(),
                              );
                      },
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPhraseItem(Phrase phrase) {
    Random random = Random();
    int colorIndex = random.nextInt(_itemColors.length - 1);
    Color currentColor = _itemColors[colorIndex];
    if (_colorCounter >= 10) _colorCounter = 0;

    return InkWell(
      onTap: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => PhraseDetail(
                      phraseToShow: phrase.phrase,
                      color: currentColor,
                    )));
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 80,
          decoration: BoxDecoration(
              color: currentColor,
              borderRadius: BorderRadius.all(Radius.circular(4)),
              boxShadow: [
                BoxShadow(
                    blurRadius: 8,
                    color: Colors.grey.withOpacity(0.5),
                    offset: Offset(0, 3))
              ]),
          child: Center(
              child: Text(
            phrase.phrase,
            style: TextStyle(color: Colors.white),
          )),
        ),
      ),
    );
  }
}
海尔
  1. 将第一个的第二个child(Padding包裹Row起来Flexible
  2. 包住第二子(Container第二的)RowFlexible和删除width: 300从容器参数。

在此处输入图片说明

import 'dart:math';

import 'package:flutter/material.dart';

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

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

Random random = Random();

class CategoryDetailPage extends StatefulWidget {
  CategoryDetailPage({
    Key key,
  }) : super(key: key);

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

class _CategoryDetailPageState extends State<CategoryDetailPage> {
  final List<Color> _itemColors = [
    Color(0xff16a085),
    Color(0xff2980b9),
    Color(0xff8e44ad),
    Color(0xff2c3e50),
    Color(0xffd35400),
    Color(0xffbdc3c7),
    Color(0xff27ae60),
    Color(0xfff39c12),
    Color(0xff7f8c8d),
    Color(0xffc0392b),
  ];
  int _colorCounter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Padding(
          padding: EdgeInsets.all(16.0),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Row(
                mainAxisSize: MainAxisSize.min,
                // crossAxisAlignment: CrossAxisAlignment.stretch,
                children: [
                  Container(
                    child: ClipRRect(
                      borderRadius: BorderRadius.circular(8),
                      child: Image(
                        image: NetworkImage(
                          'https://source.unsplash.com/random',
                        ),
                        width: 32,
                      ),
                    ),
                  ),
                  Flexible(
                    child: Padding(
                      padding: const EdgeInsets.only(left: 16),
                      child: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          Text(
                            'say congratulations',
                            style:
                                TextStyle(fontSize: 24, fontFamily: "Pacifico"),
                          ),
                          Text(
                            "At every party there are two kinds of people – those who want to go home and those who don’t. The trouble is, they are usually married to each other. - Ann Landers",
                            textAlign: TextAlign.left,
                            style: TextStyle(
                                color: Colors.grey,
                                fontStyle: FontStyle.italic),
                          ),
                        ],
                      ),
                    ),
                  ),
                ],
              ),
              Row(
                children: <Widget>[
                  RotatedBox(
                    quarterTurns: -1,
                    child: Column(
                      children: <Widget>[
                        Text(
                          "Informal",
                          style: TextStyle(
                              fontSize: 32,
                              color: Colors.grey.withOpacity(0.5),
                              fontFamily: "AbrilFatFace"),
                        ),
                      ],
                    ),
                  ),
                  Flexible(
                    child: Container(
                      height: 300,
                      child: ListView(children: [
                        _buildPhraseItem(),
                        _buildPhraseItem(),
                        _buildPhraseItem(),
                        _buildPhraseItem(),
                      ]),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildPhraseItem() {
    var colorIndex = random.nextInt(_itemColors.length - 1);
    var currentColor = _itemColors[colorIndex];
    if (_colorCounter >= 10) _colorCounter = 0;

    return InkWell(
      onTap: () {
        print('Navigator.push');
      },
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          height: 80,
          decoration: BoxDecoration(
              color: currentColor,
              borderRadius: BorderRadius.all(Radius.circular(4)),
              boxShadow: [
                BoxShadow(
                    blurRadius: 8,
                    color: Colors.grey.withOpacity(0.5),
                    offset: Offset(0, 3))
              ]),
          child: Center(
              child: Text(
            'phrase.phrase',
            style: TextStyle(color: Colors.white),
          )),
        ),
      ),
    );
  }
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章