Question

如何在此小部件层次结构中进行ListTile的工作：

            SingleChildScrollView(
              scrollDirection: Axis.vertical,
              child: Column(
                children: [
                  Row(
                    mainAxisSize: MainAxisSize.min,
                    children: <Widget>[
                      Radio(
                        value: 1,
                        groupValue: 1,
                        onChanged: (sel) {},
                      ),
                      GestureDetector(
                        child: Row(
                          children: <Widget>[
                            //Text('Title'), -- This is OK, but ListTile fails
                            ListTile(
                              title: Text('Title'),
                              subtitle: Text('Subtitle'),
                            ),
                          ],
                        ),
                        onTap: () {},
                      ),
                    ],
                  ),
                ],
              ),
            ),

请理解，我不能完全控制窗口小部件的层次结构-框架正在构建SingleChildScrollView，Radio，GestureDetector等。我只是想提供一个 child 小部件中的选项。（我以简化的形式复制了层次结构以进行调试和实验。）

我要例外：

flutter: ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
flutter: The following assertion was thrown during performLayout():
flutter: BoxConstraints forces an infinite width.
flutter: These invalid constraints were provided to RenderParagraph's layout() function by the following
flutter: function, which probably computed the invalid constraints in question:
flutter:   _RenderListTile._layoutBox (package:flutter/src/material/list_tile.dart:1318:9)
flutter: The offending constraints were:
flutter:   BoxConstraints(w=Infinity, 0.0<=h<=Infinity)

通常，当我遇到此类问题时，我只是将小部件包装在Expanded中，但在这种情况下不起作用。

请注意，如果我将ListTile替换为简单的Text小部件，则它可以正常显示。

Answer 1

您可以将ListTile包裹在Container或ConstrainedBox中并设置其maxWidth：

ConstrainedBox(
      constraints: BoxConstraints(
        maxWidth: MediaQuery.of(context).size.width - 50,
      ),
      child: ListTile(
        title: Text('Title'),
        subtitle: Text('Subtitle'),
        trailing: Text('Trailing'),
      ),
    ),

Answer 2

您可以在下面复制粘贴运行完整代码
您可以使用IntrinsicWidth包装Row和Expanded包装ListTile，然后可以使用多个Expaned ListTile

GestureDetector(
                  child: IntrinsicWidth(
                    child: Row(
                      children: <Widget>[
                        //Text('Title'), -- This is OK, but ListTile fails
                        Expanded(
                          child: ListTile(
                            title: Text('Title'),
                            subtitle: Text('Subtitle'),
                          ),
                        ),
                      ],
                    ),
                  ),

工作演示

完整代码

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,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      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> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        scrollDirection: Axis.vertical,
        child: Column(
          children: [
            Row(
              mainAxisSize: MainAxisSize.min,
              children: <Widget>[
                Radio(
                  value: 1,
                  groupValue: 1,
                  onChanged: (sel) {},
                ),
                GestureDetector(
                  child: IntrinsicWidth(
                    child: Row(
                      children: <Widget>[
                        //Text('Title'), -- This is OK, but ListTile fails
                        Expanded(
                          child: ListTile(
                            isThreeLine: true,
                            title: Text('Title'),
                            subtitle: Text('this is long text this is long text this is long text \n'* 10),
                          ),
                        ),
                      ],
                    ),
                  ),
                  onTap: () {},
                ),
              ],
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

完整代码2重播

    import 'package:flutter/cupertino.dart';
    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,
            visualDensity: VisualDensity.adaptivePlatformDensity,
          ),
          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> {
      int _counter = 0;

      void _incrementCounter() {
        setState(() {
          _counter++;
        });
      }

      @override
      Widget build(BuildContext context) {
        return Scaffold(
          appBar: AppBar(
            title: Text(widget.title),
          ),
          body: SingleChildScrollView(
            scrollDirection: Axis.vertical,
            child: Column(
              children: [
                Row(
                  mainAxisSize: MainAxisSize.min,
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Expanded(
                      flex: 1,
                      child: Radio(
                        value: 1,
                        groupValue: 1,
                        onChanged: (sel) {},
                      ),
                    ),
                    Expanded(
                      flex: 5,
                      child: GestureDetector(
                        child: LayoutBuilder(
                          builder:(context, constraints) {
                            print(constraints.maxWidth);
                            print(constraints.minWidth);
                            return ConstrainedBox(
                              constraints: BoxConstraints(                            
                                  maxWidth: constraints.maxWidth),
                              child: ListTile(
                                //isThreeLine: true,
                                title: Text('Title'),
                                subtitle: Text(
                                  'Textlargeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee',
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 13.0,
                                    fontFamily: 'Roboto',
                                    color: Color(0xFF212121),
                                    fontWeight: FontWeight.bold,
                                  ),
                                ),
                              ),
                            );
                          }
                        ),
                        onTap: () {},
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ),
          floatingActionButton: FloatingActionButton(
            onPressed: _incrementCounter,
            tooltip: 'Increment',
            child: Icon(Icons.add),
          ),
        );
      }
    }

如何在小部件层次结构中约束ListTile

2 个答案: