Flutter 带圆角的列表视图

Question

我正在尝试在 Flutter 中创建一个带有圆角的列表视图。 我想我可能通过在列表视图周围添加一个 ClipRRect 来走上正确的轨道。 但是，当我这样做时，只有顶角是圆角的，底角不是，我认为这是因为列表视图没有足够的行来占据全屏，但是 ClipRRect，必须占据整个屏幕宽度.

向列表视图小部件添加圆角的最佳方法是什么？

Answer 1

试试这个带有列表的圆角。

Container(
    decoration: BoxDecoration(
            border: Border.all(
                color: Color(0xFFF05A22),
                style: BorderStyle.solid,
                width: 1.0,
            ),
            color: Color(0xFFF05A22),
            borderRadius: BorderRadius.circular(30.0),
        ),
    child:ListView(
    children: new List.generate(
        100,
        (index) => Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Text("data $index"),
                  Divider(),
                ])),
  ),
    )

Answer 2

用SizedBox包装您的ListView并提供大小。

body: LayoutBuilder(
  builder: (context, constraints) {
    return ClipRRect(
      borderRadius: BorderRadius.circular(12.0),
      child: SizedBox(
        height: constraints.maxHeight,//based on your need
        width: constraints.maxWidth, 
        child: ListView.builder(

Answer 3

https://gist.github.com/Nitingadhiya/5f2020d2f3d3258d0ff95280e025062f

//List-view-border-radius-example.dart
// Border-bottom-left
// Border-bottom-right
// Border all


import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: ListBuilder(),
    );
  }
}

class ListBuilder extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: const EdgeInsets.all(8),
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              borderRadius:
                  const BorderRadius.only(bottomLeft: Radius.circular(85.0)),
              color: Colors.amber[600],
            ),
            height: 50,
            child: const Center(child: Text('Entry A')),
          ),
          Container(
            height: 50,
            decoration: BoxDecoration(
              borderRadius:
                  const BorderRadius.only(bottomRight: Radius.circular(85.0)),
              color: Colors.amber[500],
            ),
            child: const Center(child: Text('Entry B')),
          ),
          Container(
            height: 50,
            decoration: BoxDecoration(
              borderRadius: const BorderRadius.all(Radius.circular(85.0)),
              color: Colors.amber[100],
            ),
            child: const Center(child: Text('Entry C')),
          ),
        ],
      ),
    );
  }
}

Answer 4

我喜欢在单独的文件中为 BoxDecoration 和其他硬编码值创建常量，例如

    const kCards = BorderRadius.only(
  bottomLeft: Radius.circular(5),
  bottomRight: Radius.circular(5),
  topLeft: Radius.circular(20),
  topRight: Radius.circular(20),
);

然后在装饰中调用 const kCards：kCards，它让你的代码更干净，当然也遵循 DRY-Do not Repeat Yourself。

如果您想对特定按钮/图块等进行任何调整，请使用

例如...

gradientButton.copyWith(color: Colors.blue),
borderRadius.copyWith(bottomLeft: Radius.circular(20),),

另一个示例，但具有硬编码值

          ListTile(
            title: TextField(
              controller: _email,
              decoration: InputDecoration(
                labelText: 'Email',
                border: OutlineInputBorder(
                  borderRadius: BorderRadius.circular(10.0),
                ),
              ),
            ),
          ),

带有 ClipRect 的 ListView 特定示例

          ListView(
            shrinkWrap: true,
            children: [
              ClipRect(
                child: TextField(
                  controller: _email,
                  decoration: const InputDecoration(
                    labelText: 'Email',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              const SizedBox(height: 10),
              ClipRect(
                child: TextField(
                  controller: _password,
                  obscureText: true,
                  decoration: const InputDecoration(
                    labelText: 'Password',
                    border: OutlineInputBorder(),
                  ),
                ),
              ),
              const SizedBox(height: 10),
            ],
          ),