Flutter中PageView.Builder占满空间及组件切换问题排查

Let's break down what's going wrong and fix your code step by step:

Root Causes of Your Errors #

1. Misplaced Expanded: Expanded only works as a direct child of Row, Column, or Flex widgets. You had it nested inside a Center, which isn't a flex container—this caused the "RenderBox was not laid out" error.
2. Unbounded Height in ListView: ListView allows its children to have infinite vertical space. When you tried to use widgets that demand infinite height (like SizedBox(height: double.infinity) or unconstrained PageView), it led to the "BoxConstraints forces an infinite height" error.
3. Inappropriate ListTile: ListTile is designed for small, structured list items (leading/title/subtitle). Wrapping a full-screen PageView inside it adds unnecessary layout constraints and complexity.

Fixed Code (Preferred Approach: Use Column for Full-Space PageView) #

This approach replaces the ListView with a Column to give your PageView all available screen space without conflicts:

class _MyHomePageState extends State<MyHomePage> { 
  TextEditingController _uri = TextEditingController(); 
  bool flag = false; 
  bool swap = false; 
  int _index = 0; 

  @override 
  void initState() { 
    swap = widget.swap; 
    super.initState(); 
  } 

  @override 
  Widget build(BuildContext context) { 
    Widget swapWidget; 

    if (!swap) { 
      // Directly use PageView without unnecessary wrapping
      swapWidget = PageView.builder( 
        itemCount: 2, 
        controller: PageController(viewportFraction: 0.95), 
        onPageChanged: (int index) => setState(() => _index = index), 
        itemBuilder: (_, i) { 
          return Transform.scale( 
            scale: i == _index ? 1 : 0.9, 
            child: Card( 
              elevation: 6, 
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), 
              child: Center( 
                child: Text("Card ${i + 1}", style: TextStyle(fontSize: 32)), 
              ), 
            ), 
          ); 
        }, 
      ); 
    } else { 
      swapWidget = Card( 
        child: Center(child: Text('Nothing To show')), // Center text for better UX
      ); 
    } 

    return Scaffold( 
      appBar: AppBar(title: Text('My APP')), 
      // Use Column + Expanded to give swapWidget all available space
      body: Column( 
        children: [ 
          Expanded(child: swapWidget), 
        ], 
      ), 
    ); 
  } 
} 

Alternative: Keep ListView (For Scrollable Content) #

If you need to retain the ListView (for additional scrollable elements), explicitly set a bounded height for your PageView using MediaQuery:

@override 
Widget build(BuildContext context) { 
  Widget swapWidget; 
  // Calculate available height (screen height minus AppBar height)
  final availableHeight = MediaQuery.of(context).size.height - kToolbarHeight;

  if (!swap) { 
    swapWidget = SizedBox( 
      height: availableHeight, 
      child: PageView.builder( 
        itemCount: 2, 
        controller: PageController(viewportFraction: 0.95), 
        onPageChanged: (int index) => setState(() => _index = index), 
        itemBuilder: (_, i) { 
          return Transform.scale( 
            scale: i == _index ? 1 : 0.9, 
            child: Card( 
              elevation: 6, 
              shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(20)), 
              child: Center( 
                child: Text("Card ${i + 1}", style: TextStyle(fontSize: 32)), 
              ), 
            ), 
          ); 
        }, 
      ), 
    ); 
  } else { 
    swapWidget = Card( 
      child: Center(child: Text('Nothing To show')), 
    ); 
  } 

  return Scaffold( 
    appBar: AppBar(title: Text('My APP')), 
    body: ListView( 
      children: [swapWidget], 
    ), 
  ); 
} 

Key Fixes Summary #

• Removed misplaced Expanded: Now it's used correctly inside a Column (a flex container) to allocate all available space to the PageView.
• Simplified widget hierarchy: Removed unnecessary ListTile and Center wrappers that added layout constraints.
• Bounded height for ListView case: Calculated explicit height to avoid infinite constraint errors when using ListView.

内容的提问来源于stack exchange，提问作者user13966865